Issue With Main Menu

I made some CSS changes to the main menu. On the homepage (screenshot 1) it looks just the way I want it.
However when I click on one of the inside pages (screenshot 2) the active menu does not line up like the homepage. Also, on pages (screenshot 3) that are not linked to the main menu show differently. The screenshot 3 is a product page from woocommerce and issue here is with the “Give Online” button. Any assistant would be really appreciated.

Just in case you need the website URL Again I really appreciate you for offering a great theme.

Hi @adrian200065,

I hope you are well today and thanks for posting here.

You can try resolving the issue by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Apperance -> Theme Options -> Other -> Custom CSS

nav.navbar.navbar-default {
  height: auto;

body.home nav.navbar.navbar-default {
  height: auto;
  min-height: 65px;

Alternatively you can just add the above code in the style.css file of your child theme.

Best Regards,

Thank you Movin for the fix. I appreciated it very much.

The only issue left with the menu is the Shop page that comes from woocommerce. I rename that page to “Wisdom Place.” Menu-01 screenshot is what it should look like but on the “Shop/Wisdom Place” menu-02 screenshot it looks it is not taking the css change. I understand if this is a woocommerce issue then I will have to do something different but if you can assist thank you.

Here is the URL to that page that is not taking the css change for the “Giving Online” menu item.

Thanks again…

Hi @adrian200065,

You can use the following CSS code to resolve the GIVE ONLINE button issue.

body.woocommerce-page ul.nav.navbar-nav.navbar-right a.button.yellow3 {
  margin-top: 7px;
  background: #ffd65e; /* Old browsers */
	background: -moz-linear-gradient(top, #ffd65e 0%, #febf04 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* IE10+ */
	background: linear-gradient(to bottom, #ffd65e 0%,#febf04 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */
	color: #531988 !important;
  font-family: oswal;
  font-size: 18px;
  line-height: 20px;
  border: 1px solid transparent;
  padding: 8px 15px 18px 15px;


Thank you very much that resolve the issue.

You are most welcome here :slight_smile: