Logo position

Support Area Forums Foxy Logo position

This topic contains 6 replies, has 2 voices, and was last updated by  Bill Robbins 1 year, 9 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
URL to the page in question: http://koboldstudio.hu
  • Author
    Posts
  • #34578

    Dorian Kovacs
    Participant

    Hi Bill,

    I hope you can help me out. I would like to replace my image logo under the sidebar navigation, but I want to keep the responsiveness. Is it possible?

    Thanks,
    Dorian

    #34584

    Bill Robbins
    Moderator

    Good Morning Dorian,

    You should be able to do that. Go to the Theme Options page and choose the first tab there. There you’ll find the spot to upload a new image logo. Images should scale down once they reach the maximum width of the available space. That should make them responsive for you.

    It simply scales them down as the available space shrinks. So very wide images with small text can present troubles as they will likely be shrunk too small to read the text. If you run into that, let me know.

    Have a great Christmas,
    Bill

    #34585

    Dorian Kovacs
    Participant

    Hi Bill,

    Thanks for your answer, but it is not what I’m looking for. Maybe I was not specific enough. I’ve attached a screenshot to describe the issue.

    Looking forward to your help.

    Thanks,
    Dorian

    #34590

    Bill Robbins
    Moderator

    My apologies Dorian. The image didn’t make it through in the post there. Are you wanting to move the navigation menu above the logo when you’re on a smaller screen? If that’s the case here’s how you can do that:

    1. Go to your theme options page and choose the Advanced tab.
    2. Scroll down to the Custom CSS box and add this:
      
      @media only screen and (max-width: 767px) {
      
      	#mobile-menu {
      		position: absolute;
      		top: 10px;
      		left: 5%;
      	}
      	
      	#logo {
      		margin-top: 80px;
      	}
      
      }
      
    3. Update your settings.

    That should move the navigation on top of the logo on smaller screens. See if that doesn’t do the trick for you. Let me know if you have any questions or trouble.

    Take care,
    Bill

    #34594

    Bill Robbins
    Moderator

    I understand what you’re going for now. Sorry about that. Instead of the snippet I posted above, add this to your Custom CSS:

    
    #logo {
    	display: none;
    }
    
    .wrap {
    	margin-top: 100px;
    }
    
    #sidebar .widget {
    	background-color: transparent;
    }
    

    That will take out the default logo and move the content area of the theme down from under the header bar. You can adjust the content area’s position by changing the 100px in this snippet to move it up or down on the screen.

    To add the logo below the navigation, I would use a plugin like Simple Image Widget (https://wordpress.org/plugins/simple-image-widget/) to let you add in an image to a widget. You can then place the widget in the default sidebar and it should show up across the site that way.

    See how that works for you.

    Bill

    #34627

    Bill Robbins
    Moderator

    Hi Dorian,

    So you’re looking to hide the image on larger screens. You could do that this way:

    
    @media only screen and (max-width: 767px) {
    
    	#sidebar .widget {
    		display: none;
    	}
    
    }
    

    I noticed in the custom CSS, this style:

    
    #sidebar {
        float: left;
        position: relative;
        width: 240px;
    }
    

    You’ll want to wrap that in a media query like this:

    
    
    @media only screen and (min-width: 1024px) {
    	#sidebar {
    	    width: 240px;
    	}
    }
    

    So that the size only affects bigger screens. That will keep the sidebar from getting pushed down in the 768 to 1023px wide widths.

    Also this style:

    
    @media screen and (max-width: 600px) {
        #sidebar .widget {
            display: hidden !important;
    }
    

    Looks like it’s missing a closing bracket. Try making it like this:

    
    @media screen and (max-width: 600px) {
    	#sidebar .widget {
            	display: hidden !important;
    	}
    }
    

    The theme’s pre-built breakpoints are at 768px and 1024px wide so I would go with those for making changes since they’ll line up with the other layout switches.

    See how those go for you,
    Bill

    #34630

    Bill Robbins
    Moderator

    Splendid. Merry Christmas to you too 🙂

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Logo position’ is closed to new replies.