Navbar Box Shadow Width

Support
#1

hi

I have adjusted my navbar so the box shadow is now on the top and set it to my brand colour.

Here is the code I used to adjust the navbar:-

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

Is it possible to have the box shadow only the width of the item it is above and not the width of the entire space? I have done some searching and have not been able to find out what controls the width of each item.

cheers

#2

Hi @guybower1,

Unfortunately we can not help without having access to the website and the section that you are talking about. The Box Shadow takes the whole width of the element that you enforcing the shadow. So there will be no way to change that.

Unless you set the box shadow to none for the element and choose another element that has the width that you want and add the box-shadow for that element.

Thank you.

#3

Sorry Christopher

Thanks so much for the reply

I have now added a secure note to the post

Regards

#4

Hey @guybower1,

Thank you for providing the URL. It is only possible if you give the box shadow directly to the navbar menu items text. As an example you can remove your code and use this one instead:

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

This will give you the following results:

image

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Hope this helps!

#5

hi Nabeel

Thanks so much for your reply. That works well

I added a negative top margin and increased the padding to get the shadow back to the top of the navbar, but that seems to work now

Take care and thanks

#6

We are delighted to assist you with this.

Cheers!

#7

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