[Resolved] How can I move the main menu up so it is overlaying on-top of my header?

Home Forums Support [Resolved] How can I move the main menu up so it is overlaying on-top of my header?

Home Forums Support How can I move the main menu up so it is overlaying on-top of my header?

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #261666
    Kelly

    Hi,

    I am trying to move the primary navigation menu up by about 20px. I tried doing padding-top: -20px however the background of the header seems to take over.

    Thanks

    Kelly

    #261673
    Leo
    Staff
    Customer Support

    Hi Kelly,

    If you want the menu merged with the header, try the Float Right or Float Left option in Navigation Location.
    https://docs.generatepress.com/article/navigation-location/

    Let me know if this is what you are after.

    #261725
    Kelly

    Thank you for your reply,
    I gave that a try, it isn’t quite what I was looking for, for example see this site here: http://proverbs31.org/ – their nav bar sits half on the header and half off of it.

    With the float I wasn’t able to accomplish this for some reason, I will keep trying.

    #261741
    Kelly

    Hi, in order to accomplish having the nav bar ontop of header I had to do this:

    .header-image {width: 600px; max-width: 100% important;}
    .site-logo {float:left !important; }
    .site-header {position: inherit;}


    @media
    (min-width:1025px) {
    .main-navigation {margin-top: -40px; box-shadow: 2px 4px 4px #888888;}

    .main-navigation .grid-container {
    max-width: 700px;
    }

    .nav-below-header .main-navigation {
    width: 950px; }
    }

    #261745
    Tom
    Lead Developer
    Lead Developer

    Glad you found a solution! 🙂

    Instead of using width, I would always use max-width to ensure responsive design.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.