SemPress theme: Moving menu bar below header image

  • Unknown's avatar
    gamesfemme · Member ·

    Hi there.

    Is there a way to move the top menu bar below the header image using CSS? I’ve had a look through the forums but could not find a definitive answer to this question.

    The blog I need help with is http://lostandlearned.com.

    Thanks in advance!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    lizthefair · Member ·

    I’m working on this and having more trouble than I expected.

    I’ll keep working on the CSS, but in the meantime, could you try something out of the box for me? It seems the site-logo would appear above the menu. Could you try loading your header image as a site logo instead? Load it the same size as it is now, just skip cropping when it gives you that option.

    If that works, we won’t have to worry about the CSS :)

  • Unknown's avatar
    lizthefair · Member ·

    Here’s some CSS that does basically the same thing as what I suggested before. If possible, it’s better to actually load the header image as a logo than to use the code below, because the process I used to make the header show up legiblity on small screens isn’t ideal.

    .logo{
    height: 200px;
    background-image: url('http://lostandlearned.files.wordpress.com/2014/08/cropped-lost-and-learned-banner3.jpg');
}
.site-header img{
    display:none !important;
}
.site-navigation{
    margin-top: 10px;
}

@media screen and (max-width:1020px){
.logo{display:none;}
.site-header img{display:block!important;}
}

    Let me know how it goes :)

  • Unknown's avatar
    gamesfemme · Member ·

    Hi again and thanks so much for your help :)

    I’ve put in the CSS you provided and it looks great! I’d still like to try loading the header as a logo as you suggested, but I’m not sure how to go about it. Is there a way to do this under the “Appearance” category on the dashboard (like with the header image)?

  • Unknown's avatar
    lizthefair · Member ·

    @gamesfemme I assumed when I saw the .logo selector that your theme was one of the ones that had site-logo enabled.

    I see now that I’m wrong about that–sorry to get your hopes up, but what we did here should work well enough. Your menu does jump back up above the header on small screens but hopefully that’s not the end of the world.

    You might also consider changing this line:

    @media screen and (max-width:1020px)

    to

    @media screen and (max-width:900 px)

    since that’s about how wide your header is–that way you can keep your design the way you prefer it more often.

    Good luck!

  • Unknown's avatar
    gamesfemme · Member ·

    You’ve been incredibly helpful. Thanks again! :)

  • Unknown's avatar
    lizthefair · Member ·

    my pleasure. Best of luck with your new site :)

  • The topic ‘SemPress theme: Moving menu bar below header image’ is closed to new replies.