Header issues in block editor

  • squints10

    (@squints10)


    1 year, 3 months ago

    I am working on a site and wanting to do a couple specific things with the header:

    • Make the header/navigation stretch to the full width of the browser on desktop view
    • Have the site logo stack on top of the navigation links in mobile view

    Here is a website with an example of what I am trying to replicate: https://ramblinredwoodsrv.com/

    I have tried to do this within the editor and am failing…thank you!!

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    1 year, 3 months ago

    Add this to the Additional CSS section of the style book (in the site editor):

    .wp-block-navigation.items-justified-center {
    max-width: 1200px;
    justify-content: space-between;
}

    This does not make the menu items full browser window width unless it’s less than 1200px wide. Rather the items fill the width taken up by your hero image, the same as your example site.

    As for the mobile nav menu, your site icon is added to the wrong element. It should be within the nav block, but before any menu items.

Viewing 1 replies (of 1 total)

The topic ‘Header issues in block editor’ is closed to new replies.