Moving header image above menu/nav bar

  • Unknown's avatar
    jessandtonic · Member ·

    Well I have figured out how to make my nav menu/bar fixed so it stays at the top, but I have had difficulty getting the header image to move above the nav bar, which I would also like to remain fixed at the top. I’ve tried several different things but nothing seems to work. I would appreciate the help!

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

  • staff-jeanpierreac · Staff ·

    Hi.

    If I understand, you would like to keep in a fixed position your navigation bar as well as your header (the jess and tonic pic) but navigation above header. I see you set your .main-navigation div position:fixed with a 230px offset to the top. I suggest you to apply these changes to your .navigation-bar div instead because it is more general and identify the whole block.

    If you decide to do in this way, you can remove position and top statements from .main-navigation in your css code and use this css Custom Code instead:

    .navigation-bar {
    position: fixed;
    top: 30px;
}

    That will overlap the title image so you will need to move it down.

    .site-header {
    margin-top: 60px;
    width: 100%;
}

    Finally, you need to move down as well the starting point of your .site-content. Otherwise the top of the content will always be under your header pic and will not be seen.

    .site-content {
    position: relative;
    top: 350px;
}

    I hope this helps you. (Make me know in other case :)

  • Unknown's avatar
    jessandtonic · Member ·

    Thank you so much Raulanton! You were super helpful. :)

  • staff-jeanpierreac · Staff ·

    Glad to read that! :)

  • Unknown's avatar
    jessandtonic · Member ·

    oh, I do have have 2 more questions if you have any spare time or thoughts! Is there any way for me to center the navigation bar menu text? (lifestyle, home, etc) and I can’t quite figure out how to change the color of the whole navigation bar, either.

  • staff-jeanpierreac · Staff ·

    Yes, of course!

    Is there any way for me to center the navigation bar menu text? (lifestyle, home, etc)

    Yes, there is :) I think the following code should solve that:

    .main-navigation {
    float: none;
    margin: 0px auto;
}

    I can’t quite figure out how to change the color of the whole navigation bar, either.

    For the nav bar:

    .navigation-bar{
    background-color: rgb(255,0,0);
    }

    And then, you could need to change navigation item colors. First statement is for those ‘non-clickable’ menu items and when hover on a clickable, and the second one for clickable options. I am not sure to be very clear :) but you will understand without problems by trying it (as I choose quite “talkative” colors!)

    .main-navigation li {
     background-color: rgb(0, 0, 255);
}

.main-navigation a {
     background-color: rgb(0, 255, 0);
}

    Then, of course, change those colors by your preferred ones!

    I hope this helps you.

  • The topic ‘Moving header image above menu/nav bar’ is closed to new replies.