Aligning Menu icon with header and Social icon

  • Author
    Posts
  • #146342

    I am trying to align the menu icon horizontally wth my homepage header and the Instagram icon. The menu icon sits too high on the left. Is there any CSS that could sort this? Also is there any way of getting the Instagram icon to sit next to the Menu icon rather than to the far right? Its quite small and is quite unnoticeable.

    Any code to change the size and location of the social icon would be much appreciated.

    The blog I need help with is patsimpsonoca.blog.

    #146344

    lelandf
    Theme Author

    Hi there,

    We can adjust this. I do want to point out that there is a reason why the menu icon sits above the header, because at narrower widths they would run into each other. I get the feeling you’re viewing your site from a pretty wide monitor?

    Anyway, this Custom CSS code should help:

    @media (min-width: 1249px) {
    	.menu-toggle {
    		top: 82px;
    	}
    
    	body .social-links {
    		right: auto;
    		left: 165px;
    		top: 114px;
    	}
    }
    
    @media (min-width: 601px) {
    	.menu-toggle {
    		top: 12px;
    	}
    
    	body .social-links {
    		right: auto;
    		left: 165px;
    		top: 44px;
    	}
    }

    I also made an adjustment at narrower widths that moves the menu button and social icon above the header, so we won’t run into that “at narrower widths they would run into each other” issue I mentioned above.

    Let me know what you think?

    -Leland

    #146531

    lelandf
    Theme Author

    Hi there,

    It looks like this code has been applied so I’ll mark this as resolved. If you have any other questions feel free to ask and I’ll see what I can do to help. :)

    Regards,
    Leland

You must be logged in to reply to this topic.