About navbar to look like Home navbar

[calicott]

Hello,

How do I make my About page navbar look exactly like my Home navbar?

I added css in the Global Css and in the Page Css of my About page. I don’t want my Ministries nav menu item to turn light grey when I click the dropdown. I want the submenu items to remain light grey on hover however.

How would I go about doing that?

Thanks

[ruenel]

Hello Darien,

Thanks for writing in!

I can see that you are using this custom CSS:

.x-navbar .desktop .x-nav > li > a {
	color: white;
  font-size: .9em;
  font-weight: 500;
}
.x-navbar .desktop .x-nav>li>a:hover>span {
     color: white;
}
.x-navbar .desktop .x-nav > li > a:hover > span, 
.x-navbar .desktop .x-nav > li.x-active > a > span, 
.x-navbar .desktop .x-nav > li.current-menu-item > a > span
{
/*   background-color:red; */
box-shadow: 0 2px 0 0 white !important;
}
/*Current menu item is black*/
.x-navbar .desktop .x-nav > .current-menu-item > a{
  color: white;
}

You also need to add this one:

.x-navbar .desktop .x-nav > .x-active > a{
    color: white;
}

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third-party developer.

Reminder: We are only giving your an example for you to start your modifications. Any results from these modifications might cause any issues sooner or later. Please be advised that heavy modifications of any feature or functions in the theme is beyond the scope of our support. Any results that will complicate things or even messed up the page will be your sole responsibility.

Best Regards.

[calicott]

Thank you! That worked.

How would I do the same for the mobile view? I added the css and typed .mobile instead of .desktop with the code you provided. I would like my About navbar to match my Home navbar mobile view.

Thanks

[christian]

Hey Darien,

That would require additional custom coding and we can’t continue providing custom codes. I’d recommend you learn CSS here and also learn how to use the browser’s element inspector to get the classes you need.

If learning isn’t an option, please consider subscribing to One where we can answer custom development questions.

Thank you for understanding.