Top Navigation Menu color change

Support
#1

Hi
Site link:https://healwithtruth.com
We do not like the red lines when you hover or select the top menu buttons. could this be changed to light blue as our design. #d9e5f2
B)Also both the contact and home page top menu seem to be highlighted at the same time is is possible this can be fixed to only highlight the page or section that has been selected. Thanks

#2

Hi There @uboslav,

Thanks for writing in! Could you please try adding the following CSS rule into your X -> Theme Options -> CSS area and see if that helps.

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: inset 0 4px 0 0 #d9e5f2;
}

Thanks!

#3

Hi code not working on mozila and explorer when i add code in X -> Theme Options -> CSS
when i put code in Appearance - Customize - additional css and now is working but i want this

“both the contact and home page top menu seem to be highlighted at the same time is is possible this can be fixed to only highlight the page or section that has been selected.” Thanks

#4

also the logo seems to work fine on the desktop, but on mobile is seems too small. Is there a way this can be fixed for mobile to keep a normal looking in size.

#5

Hi There @uboslav

I’m sorry, but the second issue I did not notice earlier, when checking your site. It’s happening because you’re using one page navigation. Please check the following post for the workaround (https://theme.co/apex/forum/t/menu-issues-with-one-page-navigation/55257/2?u=mldarshana).

With regard to the logo issue on mobile, Could you please try adding the following CSS rule into your X -> Theme Options -> CSS area and see if that helps.

@media (max-width:480px) {
  .x-brand.img {
    width: 300px !important;
    max-width: 300px !important;
  }
}

Thanks!

#6

This working. Thanks

#7

Hi i want to put inline menu and logo now i see this
https://imgur.com/MCABIyJ just on mobile, can this be done ?

#8

Hey @uboslav,

You can still make use of the code in the previous suggestion but move to bottom of the Global CSS because it seems to be overridden by other codes then adjust to width and max width value lower like this:

@media (max-width:480px) {
  .x-brand.img {
    width: 210px !important;
    max-width: 210px !important;
  }
}

Hope this helps.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.