-
rose444
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!
-
Alvind
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.
-
rose444
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%); }
-
rose444
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?
-
Alvind
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.
- You must be logged in to reply to this topic.