Primary Menu Location

Hi 🙂

Thanks for posting. You can center the header: https://purothemes.com/documentation/ultra-theme/customizer/theme-settings/header/#heading-header-layout.

Can you perhaps send a link to your site? I can assist with a little Custom CSS to get everything fitting a bit better. You can use the Private Reply checkbox when sending URL’s.

This reply has been marked as private.

Thanks for the update.

If you’re using Ultra Premium you can try adjust the Header Height setting at Customize > Theme Design > Header > Height.

To adjust the header height in Ultra free you can try adding to Custom CSS/Additional CSS:

.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.

56 is just an example, the default is 112px.

Thanks for your help. I confirm I am using the Premium version.

I tried your suggestion, but there is still too much space between the menu items and the bar at the bottom which comes up when you hover over the menu item.

I know that as you scroll down, this space gets narrower, but before any scrolling the navigation menu is too high for my purposes.

Thanks 🙂

I can get back into this tomorrow but my initial customisation attempt would be:

.main-navigation {
	height: 40px !important;
}

.main-navigation div>ul>li>a, .main-navigation .menu-search .search-icon:before {
    height: 40px !important;
    line-height: 40px !important;
}

The above added to Customize > Additional CSS. The value in the first rule can be increased higher than the values in the second rule which need to remain the same. So you could have 60px in the first rule and 50px 50px in the second for a different look.

Back tomorrow 🙂

Many thanks, I did try that example, the only potential issue is that the little hover bar was appearing above the menu, not below.

Thanks for your help anyway!

Thanks for trying. If possible, please, can you temporarily bump my account to Admin so I can add the Custom CSS myself and see if I can get this close to finished for you. You could then make final size adjustments. You can delete my account when we’re done.

Hi, I’ve done that, many thanks for your assistance.

Thanks, please, check now.

Combination of the setting at Theme Design > Header > Height and the rules within Additional CSS section.

Please, let me know 🙂

Looks great, thank you very much indeed!

Super 🙂 Glad to hear that helped.

You can perhaps migrate the one CF7 rule you have atAppearance > Custom CSS to Customize > Additional CSS and deactivate that plugin. OR you could migrate all rules from Customize > Additional CSS to Appearance > Custom CSS and keep using the plugin, this is a good option if you find Custom CSS an easier space to work in, given the width available.

Will take a look, thanks again.