Header builder / navigation bar

Hi

Great theme.

I’m using header builder and have my main menu displayed in the primary header row, in between my logo and the account / wishlist / basket widgets.

I’d like all of this to display in lower case and remove the font awesome arrows, but cant find these options. I’ve used custom CSS in both the main editor and the themes custom CSS portal in theme settings, but neither have an affect.

I’d also like the menu items display in lower case in the mobile pop out menu’s.

Please can you advise how i can do this.

Also, the header builder is restricting to three separate columns per row, meaning that it wont allow me to display the main menu stretched across the page in the third row, with each item evenly spaced and styled.

Please can you advise how i can do this.

Many thanks

Hello,

Thank you so much for contacting our support center.

Try to add the following code snippet to the Custom CSS area in Theme Settings to change the menu as you need

div .site-mobile-menu li a,
div .woodmart-navigation .item-level-0>a {
	text-transform: none;
}

div .woodmart-navigation .item-level-0.menu-item-has-children>a:after {
	content: none;
}

Could you please show us on the screenshot how do you want to display the menu in our header structure?

Regards

Brilliant, that’s done what i need.

With regards the nav itself, the menu items look to bunched up, if i increase the letter spacing then it doesn’t look right. I’d also like to put a border around each menu item.

Attached is a screen snip of another site which shows the nav stretched across the full width of the page and each menu item has a border.

I’d like to be able to do this on an independent header row, or at least be able to do this in between my logo and the account widget.

Attachments:

You must be logged in to view attached files.

Hi

Please advise, many thanks

Try to add the following code snippet to the Custom CSS area in Theme Settings

.main-nav .menu {
    width: 100%;
}
.main-nav  .item-level-0 {
        -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
                flex: 1 1 auto;
}
.main-nav  .item-level-0 > a {
    width: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

And choose this style for the navigation element in header builder https://gyazo.com/56af920457de0ee974422b8943cdde05

[Author]

Posts