Top Menu

Hi Veronica

Thanks for reaching out. Please, try adding the following to Appearance > Customize > Additional CSS or your own Custom CSS plugin.

/* Header */
.site-header {
    padding: 40.5px 0;
}

Adjust the padding value as required. The single value manages top and bottom padding which in turns sets the header height.

Hi,

I did, but this happened.

Can you tell me how to:
– have the two sides in white too?
– move the whole menu to the right?
– insert a logo or text on the left?
– is my menu still going to be responsive on mobile devices?

thank you,

Sorry about that, I thought this was for the Puro theme, I’ve moved this topic to the Ultra forum. Here is the easiest way to proceed, I think 🙂

1. Remove the Custom CSS previously added.
2. Disable the top bar at Appearance > Customize > Theme Settings > Top Bar, disable the checkbox.
3. Enable the Header at Appearance > Customize > Theme Settings > Header, enable the checkbox.
4. Add your logo at Appearance > Customize > Theme Settings > Logo.
5. Go to Appearance > Customize > Menus > Menu Locations and save a menu to the Primary Menu location.
6. Customize > Additional CSS, add the following:

.site-header,
.site-header .container,
.site-header .site-branding-container,
.main-navigation .menu-search {
	height: 56px
}
.main-navigation div>ul>li>a,
.main-navigation .menu-search .search-icon:before {
	height: 56px;
	line-height: 56px
}
.main-navigation ul ul {
	top: 53px
}

If you want to change the header height further, change all the 56px values. The last value must be 2px less than all the other values.

56px is 4em considering a 14px base.

Hope that helps.

Hi!

I had to specify.

Thanks so much for the help and the elaborate comprehensive explanation. Somehow I wasn’t notified for your response. Super glad you got back to me! It’s beautiful now! Just like I wanted it 🙂

Thanks again!!

Veronica

Super 🙂 Glad to hear that did the trick. All the best with your site.