Docs

[bak]

Hi

I have a few design issues with the navbar menu I would like to address

1) Is it possible to have the litle dividers between the menu points in red rather than in grey?
2) also, I do not need the dividers at the beginning and end of the menu. Is it possible to remove them
3) Is it possible that the red line above the navbar menu point remains if you are on a sub page of that navbar menu point? TAt the moment it just remains if you are on the top page of a navbar point.
4) How can I change the color of the sub menu links in mega menu and normal menus? The grey I use at the moment is too light.
I tried using

/* submenu text color */
.x-navbar .desktop .sub-menu a {
color:blue;
}

but no effect

Thanks

[bak]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in!

#1 and #2. You can add this under Custom > CSS in the Customizer.

.x-navbar .desktop .x-nav > li > a {
  border-right: 1px solid #de0003;
}

.x-navbar .desktop .x-nav > li:first-child > a, .x-navbar .desktop .x-nav > li:last-child > a {
  border: medium none;
}

#3. You can try this :

.x-navbar .desktop .x-nav > .current-page-parent {
  box-shadow: 0 4px 0 0 #de0003 inset;
}

#4. You can use this :

.x-navbar .sub-menu a {
  color: #333 !important;
}

Hope this helps.

Cheers!

[bak]

This reply has been marked as private.

[Friech]

Hi There,

Regarding #1 and #2, It works on our test

But update the code a little bit to this:

.x-navbar .desktop .x-nav > li > a,
.x-navbar .desktop .x-nav>li:first-child>a {
  border-right: 1px solid #de0003;
}

.x-navbar .desktop .x-nav > li:last-child > a,
.x-navbar .desktop .x-nav>li:first-child>a {
  border-left: medium none;
}

#3 Update the code to:

.x-navbar .desktop .x-nav > .current-page-parent,
.x-navbar .desktop .x-nav > .current-page-ancestor {
  box-shadow: 0 4px 0 0 #de0003 inset;
}

#4 Use this code instead.

.x-navbar .desktop .sub-menu li a {
	color: blue;
}

Hope it helps, Cheers!

[bak]

This reply has been marked as private.

[Christopher]

Hi there,

Please find this code :

.x-navbar .desktop .x-nav>li>a {
    border-right: 1px solid rgba(0,0,0,0.1);
    background-color: white;
    height: 10px;
    padding-top: 0;
    margin-top: 20px;
}

And update it to :

.x-navbar .desktop .x-nav>li>a {
    background-color: white;
    height: 10px;
    padding-top: 0;
    margin-top: 20px;
}

Remove this CSS :

.x-navbar .desktop .x-nav>li:first-child>a {
    border-left: 1px solid rgba(0,0,0,0.1);
}

Hope it helps.

[bak]

This reply has been marked as private.

[John Ezra]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-navbar .desktop .x-nav > li > a span {
    border-right: 1px dotted #de0003;
    padding-left:10px;
    padding-right:10px;
}

.x-navbar .desktop .x-nav > li > a , .x-navbar .desktop .x-nav>li:first-child>a {
    border-right: 0px dotted #de0003;
}

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding: 0;
}

.x-navbar .desktop .x-nav > li:last-child > a span {
    border-right:none;
}

Hope this helps – thanks!

[bak]

This reply has been marked as private.

[Christopher]

Hi there,

To remove box shadow add this :

.x-navbar .desktop .x-nav > li:hover, .x-navbar .desktop .x-nav > .x-active, .x-navbar .desktop .x-nav > .current-menu-item {
    box-shadow: none;
}

Find this code

.x-navbar .desktop .x-nav>li>a {
    background-color: white;
    height: 10px;
    padding-top: 0;
    margin-top: 20px;
}

and update it to :

.x-navbar .desktop .x-nav>li>a {
    background-color: white;
    height: 10px !important;
    padding-top: 0 !important;
    margin-top: 20px;
}

To remove border from last item add this :

.x-navbar .desktop .x-nav>li:last-child>a {
    border: none;
}

Hope it helps.

[Author]

Posts