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 WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Site Header – How To Move The Search/Account/Cart icons?

  • Hello,

    I am trying to build a site header that has two rows.

    On the top row, I’d like the site title centered, and the account, cart and search icon to the right. From looking at the Emerald starter site I can see that a hook can be used to add the account icon. On the bottom row, I’d like the primary menu items to span the full width of the container.

    I have attached an image of how the header currently looks. I’m using “navigation location: below header” and center alignment to achieve what I’ve done so far.

    My questions are:
    1. Is there a way to move the account, cart, and search icons to the right hand side of the top row?
    2. Is there a way to ensure the menu items span the full width of the container on the second row?

    It’s not a live site yet but I can provide further screenshots and information if needed. Thank you!

  • Hi there,

    You can try using a Secondary Navigation for the second row menus.
    https://docs.generatepress.com/article/secondary-navigation-layout-overview/

    For the top row, you can keep the default menu of the Emerald site.

  • Hi,

    Thanks for your reply!

    I’ve added the secondary navigation in, but I’m not sure how to center the site title using this method. I’ve tried changing the navigation locations and header settings but nothing seems to put the site title in the center with the account, cart, and search icons to the right. I’ve attached a screenshot so you can see what it looks like now. What do you suggest?

    Thank you!

  • To center the title, try this CSS:

    .navigation-branding {
        position: absolute;
        left: 50%;
        transform: translatex(-50%);
    }
  • Hi Ying,

    Thank you for that! It works if I change .navigation-branding to .main-title.

    Unfortunately it pushes the site title right down to the bottom of the space (screenshot attached). Is there any way to correct this?

  • This is the situation where we need to inspect the site to understand what it behaves like that. I tested the CSS provided by Ying on my test Emerald site, and it works. There must be something on your site that is causing the issue.

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