Docs

[mahmoud237]

I made a logo in the middle using this code you provide in another thread … it’s working perfectly

@media (min-width: 980px) {
    .x-logobar {
       display: none !important;
       visibility: hidden !important;
    }
    .x-navbar .desktop .x-nav > li.logo-menu-item > a {
        text-indent: -99999px;
        text-align: left;
        width: 306px;
        height: 62px;
        background: url(your-logo) no-repeat center center;
        background-size: contain;
    }
}

1-but now I want to add margins around the logo to make pages near the edges .

For more clarification I want to change it from “1” to “2” see it on attachment.

2- I want to remove the line effect that appears while hovering on navbar pages and replace it with bold effect only.

Thanks

[mahmoud237]

This reply has been marked as private.

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.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: none;
}

li#menu-item-6686 {
    margin: 0 200px;
}

Hope it helps 🙂

[mahmoud237]

Thanks so much that worked … But I need also to add a bold effect while hover on navbar pages … How can I do that ?

[mahmoud237]

Well I mange to do it by adding this code

.x-navbar a:hover {
    font-weight: bold !important;
  	font-size: 18px !important;
}

but I want it to still have this bold and font-size effect while I am still on this page not only on hover

Thanks

[Rad]

Hi there,

You can change it into this,

.x-navbar a, .x-navbar a:hover {
    font-weight: bold !important;
  	font-size: 18px !important;
}

Or if you wish to apply it when it’s active.

.x-navbar a:hover, .x-navbar .current-menu-item > a{
    font-weight: bold !important;
  	font-size: 18px !important;
}

Hope this helps.

[mahmoud237]

Thanks a lot … That’s works

[Thai]

You’re most welcome 🙂

If you need anything else please let us know.

[mahmoud237]

Hi I foind some bugs … I hope you can help me on it.
1- found a bug on this code

li#menu-item-6686 {
    margin: 0 200px;
}

it worked perfectly on a large screen but while shrinkage the width of the screen .. the navbar drops in a second line like the attached photo (1) … I want it to still in one line and be responsive to the screen width.

2- I want to make a blue line beneath the navbar .. just like the attached photo (2).

3- How can I add a top margin for this centered logo … see the attached photo (3) ?

[Lely]

Hello There,

1.) I can see that you have fixed this already by adjusting the value per screen size using media query. Please confirm.

2.) Option 1

.x-navbar {
   border-bottom: 1px solid rgb(2,173,213); 
}

Option 2

.x-navbar {
    box-shadow: 0px 2px 1px rgb(2,173,213);
}

3.)

li#menu-item-6686 a {
    margin-top: 10px; /*Adjust this accordingly*/
}

Hope this helps.

[mahmoud237]

1- Yes I managed to solve issue (1)

2- it worked but if there is a way to make the line to be bolder in the centre and gradually become thinner on his way to edges that will be better.

3- Worked Perfectly,

Thank You for your help

[Rupok]

Hi there,

Thanks for updating. #2 would need some complex coding but that will be outside of our support scope.

Cheers!

[mahmoud237]

Thanks for your help anyway … You guys are amazing 🙂

[Prasant Rai]

You are most welcome. Feel free to ask us again. Have a great day! 🙂

[mahmoud237]

Hey, I got the line with the effect I want … How can I insert it just below the navbar …
See the line on attachment.

Thanks

[Author]

Posts