Header Menu Items - Centered and Wrapped

Hi There,

I’m looking for some help for the website i’m building at http://staging.centralavenuehomes.com.au/ I’m looking to find a way to center the menu items vertically so they are centered to the logo. Also I’m looking to find a way to have the menu items text wrapped so instead of being how it is with the items on two separate lines when the screen is a lower resolution they would stay on the same line but each menu item wraps so it’s on multiple lines.
i.e. Narrow Lot Homes would become Narrow on one line and Lot Homes under it all as the one menu item.

Look forward to the response, hopefully I’ve been clear enough.

Kind regards,
Joseph

Hi,

You can center the navigation with this Custom CSS:

#mainnav {
    padding: 21px 0 !important;
}

Unfortunately the menu items will not fit in 1 line, only if you make the space between them smaller and also the menu item font sizes smaller too, so your menu items font will be very small.

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

Thanks Csaba,

That code worked perfectly to center the items. Shame about not being able to text wrap them guess I’ll shorten the tags down and adjust the font. You wouldn’t know what code I can put in to reduce the padding between the items would you? Otherwise I’ll trawl through previous threads.

Kind regards,
Joseph

Hi,

You can reduce the padding on the menu items with this Custom CSS:

#mainnav li {
    padding: 0 4px !important;
}

Please let me know how it works.

Best Regards,
Csaba

Awesome worked well, thanks again Csaba just one more thing to deal with if it’s not too much to ask for.

  • The About Us sub-menu items seem to be out of line when they drop down, was wondering how i could align that back up.

Kind regards,

Hi,

The padding value was added to the sub-menu too, but you can add this Custom CSS to remove the padding which caused the misalignment of submenu items:

#mainnav ul ul li {
    padding: 0 !important;
}

Please let me know how it works.

Best Regards,
Csaba

Thanks again Csaba,

That worked perfectly, your help has been great.

Kind regards,

Hi,

Great! You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba