Change Navbar Style

Support
#1

Hey there,

I’m using the Icon stack but I would love to have the Navbar style of the [Integrity1](http://demo.theme.co/integrity-1/) on my page. I read something that it is possible with the Customizer and Custom CSS but couldn’t find the right code. Could you help me?

#2

Hello Leon,

Thanks for asking. :slight_smile:

Looks like you have already made couple of changes. You an add following CSS under X > Theme Options > CSS to further mimic Integrity 1 navbar styling:

.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 #84d64a;
}

.x-navbar {
    border-bottom: 1px solid #ccc;
    box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#3

Hey thank you! worked great! Is there also a possibility to change the outline of the Buttons, that there won’t be the Pill style? How can I change the hover color ?

#4

Hi Leon,

To change button styles, please head over to X -> Theme Options -> Buttons area.

Also it’s possible using custom CSS as well by assigning CSS classes for your buttons. Please refer to our knowledge base section for more examples (https://theme.co/apex/forum/t/customizations-implementing-additional-button-colors/206).

Hope that helps.

#5

I changed the button style already but the style in the NavBar stays the same? Were can I assign css classes for the NavBar buttons? sorry if I wasn’t clear in the last post

#6

Hello Leon,

Thanks for updating the thread.

I checked your website and don’t see button in navbar. Can you please confirm or have you removed temporarily? To change the button style and hover color, please use following CSS:

.x-navbar .x-btn {
    border-radius: 0 !important;
}

.x-navbar .x-btn:hover {
    color: #ddd !important;
    background-color: #fff !important;
}

Please let us know if the CSS worked for you.

Thanks.

#7

Hey, Im currently working on a new website so changes aren’t viewable online. The CSS unfortunately didn’t work for me. Any other suggestions?

#8

Hi again.

Sorry for the confusion. To remove the pill style from the navigation menu buttons just add the following code in the Theme Options > CSS:

.x-navbar .desktop .x-nav>li>a>span {
    border: none !important;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#9

Hey thank you now the buttons look alright. Do you have any suggestion to change the hover color in the top of the NavBar?

#10

Hi There,

Please also add this custom CSS:

body .x-navbar .desktop .x-nav > li > a:hover {
    color: #f00;
}

Hope it helps :slight_smile:

#11

I tried this but it just changes the color of the Font. but I want this part to change color.

#12

Hi There,

Sorry for the confusion!

Please try with this custom CSS instead:

.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 #a59896;
}

Hope it helps :slight_smile:

#13

Thank you works great!

#14

You’re most welcome!

#15

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