Docs

[mahmoud237]

How can I make a custom Navbar just like the attached photo .. I want to add icons near active page and when hover to another page the icon appear also in hovering page

Thanks

[mahmoud237]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for writing in.

Is it the icon? You can add the menu item and add image’s HTML as the label. Or is it the hover and active status? Your navbar is almost the same as screenshot except that icon and highlights. Right?

As for disabling the highlight, you may add this code to Admin > Appearance > Customizer > Custom > CSS

.x-navbar:not(.x-navbar-scrolled) .desktop .x-nav > li > a:hover, .x-navbar:not(.x-navbar-scrolled) .desktop .x-nav > .x-active > a, .x-navbar:not(.x-navbar-scrolled) .desktop .x-nav > .current-menu-item > a {
    background-color: transparent;
    color: #fff;
    transition: all 0.5s linear;
}

Thanks!

[mahmoud237]

I disabled the previous blue highlight via your code … But I don’t know yet how to make the icon as hover and active status .

find the icon on attachment

Thanks

[Rad]

Hi there,

To clarify it, you wish your icon to act as highlight/active status? Then please change that CSS to this,

.x-navbar:not(.x-navbar-scrolled) .desktop .x-nav > li > a:hover, .x-navbar:not(.x-navbar-scrolled) .desktop .x-nav > .x-active > a, .x-navbar:not(.x-navbar-scrolled) .desktop .x-nav > .current-menu-item > a {
    background-color: transparent;
    color: #fff;
    transition: all 0.5s linear;
    background: url( https://s3.amazonaws.com/community-themeco/app/uploads/2016/08/21194238/NAV_SELECTOR.png ) no-repeat;

background-size: auto 70%;
background-position: left;
}

And make sure to change image URL with your own image URL.

Cheers!

[mahmoud237]

Thanks a lot … it worked but I want to add more padding between the icon and the text .. How can I do that ?

[Rue Nel]

Hello There,

Thanks for the updates! To add more padding between your icon and the text, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar .desktop .x-nav > li > a {
    background-position: 10px !important;
}

.x-navbar .desktop .x-nav > li > a > span {
    margin-left: 20px;
}

We would loved to know if this has work for you. Thank you.

[mahmoud237]

Yes, that worked . Thanks very very much .

The last thing how can I change the navbar color after scrolling down … I use integrity stack .

I tried to change it via this code

.x-navbar {
background-color: #C7D92B ;
}

it worked very well in “about us” page but it didn’t work on the home page

[mahmoud237]

I made it by this code

.x-navbar-scrolled {
  background-color: #C7D92B !important;
}

But when I tried to make it transparent a little by rgb(5, 5, 5,0.992157) … it didn’t work and returned to the blue color …

I think there is some conflicting code but I don’t know where… If there is better way please tell me

[Christopher]

Hi there,

Upon checking your site, navabr background changes on scroll. Are you trying to change font color? If so, please try this code :

.x-navbar.x-navbar-fixed-top.x-navbar-scrolled li a span {
    color: red;
}

Hope it helps.

[Author]

Posts