Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Main nav (half on and off header) and header positioning question

  • I am unsure which is the best way to achieve this – I have a header with logo in the center and a widget both left and right – great and working, the main nav however I want floating below the header but half on the header background and half on a banner below it (or main content if banner disappears). Nav is contained and not full width.

    navigation example

    If I use primary nav “below header” – I cannot seem to pull it up on top of header (it appears underneath header background even using z-index I cannot seem to get it to show above)

    Do I use a page hero and create it that way, or as a header element – but then I am not really using the primary nav at all but navigation blocks and that never seems to work right for me

    Or hook it ?

    any best ways to achieve what I need at all?

    thank you

  • Try this CSS:

    @media(min-width: 769px) { 
    nav#site-navigation {
        margin-top: -28px;
        position: relative;
        margin-bottom: -28px;

    Note the 28px is the half of the menu item height set in customizer > layout > primary navigation, if you change that value, the 28px needs to be updated as well.

  • ok I will give that a go – thank you

  • damn your good – THANK YOU

  • You are welcome   🙂

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