Navigation Menu

[Flames Of Revival Ministries]

Good Afternoon Bill, I hope all is well with you.

Do you know any plugin or tutorial that will help me improve the navigation menu of the website? I’d like to have a round edge menu around the text and same for the drop down menu?

Is it possible to replace the text “Home” with an image?

Kind regards,

[Bill Robbins]

Hello,

All is well here. Hope you’re enjoying the autumn.

There is a plugin you can use called Nav Menu Images (https://wordpress.org/plugins/nav-menu-images/) to replace any of your menu items with an image. It usually works well for that.

For the rounded background, are you wanting to have one background with rounded corners that goes behind all the elements together or have each menu item have its own separate background?

Let me know and we’ll go from there.

Take care,
Bill

[Flames Of Revival Ministries]

Hi Bill,

Thanks for the tip. I have uploaded the plugin and added the home image. It works well. 🙂

Regarding your question on the rounded background, I am not quite sure to be honest with you. Could I try both? 🙂

Regards,
Mibeka

[Bill Robbins]

Hello Mibeka,

Here’s how to set up a solid color for the navigation background and have rounded corners for it:

1. Go to your theme options page and choose the Style tab.
2. Scroll down to the Custom CSS box and add this:

   
   ul#menu-main-menu {
   	background-color: #c0c0c0;
   }
   
   ul#menu-main-menu,
   header#primary .menu li.button a {
   	border-radius: 5px;
   }
   
   header#primary .menu li ul {
   	border-radius: 5px;
   }
   

   The top style there sets the background color. The next one sets the amount of rounding on each corner in pixels. The last one sets the rounding on the corners of the drop-down menu.

3. Update your settings.

See how that works out for you.

Enjoy your weekend,
Bill

[Flames Of Revival Ministries]

Thank you for this Bill. I just tried it and it looked odd.
What if I want to separate the menu titles with a | and center the text between these |
Please see example below:
About Us | Events | Media
…. how can I easily achieve this?-

[Bill Robbins]

Here’s one way to do that:

header#primary .menu li {
	margin-left: 0;
}

header#primary .menu a {
	padding-left: 10px;
	padding-right: 10px;
	border-right: 1px solid #c8c9c8;
}

Just to be clear, I can’t provide unlimited customization help. Our terms and conditions say we provide up to seven lines of code changes which is an amount we crossed a long time ago. Support does not equal customization.

[Author]

Posts