Box Shadow On Menu Items Assistance

[guybower1]

hi

I had a navbar which came in as part of an Ethos template installation. In the end, it was easier to replace the navbar with one created with the Header Builder in Pro, except one issue arose.

I initially had the following code to put a box shadow above the navbar items

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

This was Ok, but I wanted to have the shadow only be the width of the text, so was kindly assisted by Nabeel with this code

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

I altered the padding to a negative to get exactly the result I required.

But now having the navigation bar created in the Header Builder, the selectors have all changed. I have been able to get the box shadow above each item with this

.x-menu > li > a:hover, .x-menu > .x-active > a, .x-menu > .current-menu-item > a {
    box-shadow: inset 0 4px 0 0 #fe5000;
}

It also worked if I used .x-menu-inline in the code

The downside is the line to have the code make the width only that of the word, did not work with either selector and I am wondering if anyone has an idea of the correct syntax. Here is what I tried

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

I also tried it with .x-menu-inline, but neither of them worked.

Any suggestions on the correct selector/s to affect the width of the box shadow?

Thanks in advance

[ruenel]

Hello @guybower1,

Thanks for writing in!

You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use. instead of using a > span , you will have to use a .x-anchor-text-primary. Therefore the final code would be:

.x-menu > li > a:hover .x-anchor-text-primary, 
.x-menu > .x-active > a .x-anchor-text-primary, 
.x-menu > .current-menu-item > a .x-anchor-text-primary {
    box-shadow: inset 0 4px 0 0 #fe5000;
}

.x-menu > li > a .x-anchor-text-primary {
    padding-top: 10px;
}

Hope this helps.

[guybower1]

hi Ruenel

Yes, had spent much time in the developer tools area and had used various combinations of selectors. Many of them worked to put the box shadow in place, but could not tweak it to have the box shadow only the width of the text. That first part now works fine.

Unfortunately the next part must be not the correct selector, as the the padding affects the text itself, not the drop shadow.

Please take this in the light-hearted way in which it is meant, but I must say that it makes me feel not quite so bad, as even the experts can slip on the CSS selectors, as trust me, I experimented with half a dozen different single selectors and combinations of selectors to get the first part right. It really does show that CSS is not as easy as it looks.

Incidentally I did try some different selectors to try and achieve the second, but still no result

cheers Ruenel and thank you

[christopher]

Hi @guybower1,

Would you please kindly get back to us with the URL/User/Pass of your website using a Secure Note so that we can check the current situation to be able to find a solution for you?

Also, if it is possible a link or screenshot of the previous header so we can see exactly how the box-shadow was implemented then.

If you are using the Pro header builder, you will already have options available for you. For example, the Navigation inline element has several text and box-shadow options that might work for your case:

But I need to check the website live to see how you implemented the header and I wonder if you used Pro Header builder or not.

Thank you.

[guybower1]

hi Christopher

Apologies for the delay.

Yes, the menu bar was indeed created using the Pro header builder, but the text box shadow was put in place purely with CSS. Here is the code

.x-menu > li > a:hover .x-anchor-text-primary, 
.x-menu > .x-active > a .x-anchor-text-primary, 
.x-menu > .current-menu-item > a .x-anchor-text-primary {
    box-shadow: inset 0 4px 0 0 #fe5000;
}

.x-menu > li > .current-menu-item > a .x-anchor-text-primary {
    padding-top: 40px !important;
}

Here is a screen shot of the box shadow on hover

I am more than happy to remove the shadow that is placed with CSS and place it using the header builder. My aim is just to have the box shadow appear at the top of the black bar above each word on hover. It currently sits right on the word

Site details in a secure not

Thanks so much

[ruenel]

Hello @guybower1,

I have updated your custom CSS code in the custom header using the given code above. It is now displaying in your header.

Kindly check your site now.

[guybower1]

Hi Ruenel

Thanks so much for your reply

Unfortunately using only padding-top was not the answer. That was the reason I had altered your originally supplied answer, as it simply pushed the text down at the same time. Only just this morning I thought to try using a bottom padding to move the text back. As it turned out, it DID require a padding-bottom as well. The aim was to place the box shadow at the top of the menu bar. Simply increasing the top padding pushed the text down at the same time as the shadow moved towards the top. The bottom setting pushed the text back to the centre.

In the end, the correct setting was this:-

.x-menu > li > a .x-anchor-text-primary {
       padding-top:40px;
  padding-bottom: 40px;
}

The only downside is the button ends up with its box shadow sitting maybe 10px above the menu bar.

I have tried to adjust the distance using different selectors, .x-menu > li > a .x-btn, .x-menu > li > a .x-btn, .button and .x-menu > li > a .x-btn, .x-anchor-text-primary but it only adjusts the height of the button itself, with the box shadow moving as the height of the button changes. I’ve not been able to find a means to simply adjust the location of the box shadow.

If this is beyond the scope of support, I fully understand. Perhaps the better way is to remove the button from the menu in its original form, as it is placed via code in the Appearance>> Menus area itself, rather than placed as a button via Pro header builder. Maybe that is a better way to approach it as it will then be independent of the code affecting the rest of the menu items. What do you think?

Thanks so much for your help

Regards

[nabeel]

Hey @guybower1,

Yes it is a better approach to take out the button from the menu, since you’re using custom header now you can simply add a Button element in the navigation bar which would be independent of your menu and this will solve the box shadow problem too.

Cheers!

[guybower1]

Hi Nabeel

Thanks so much for your reply

I had a feeling that might be a better way.

OK, I have now put the button on the menu bar in the Pro header builder and gave it a class of navbtn. I have been able to put a box shadow on top using the following:-

.x-btn .x-navbtn, a:hover .x-anchor-text-primary {
  box-shadow: inset 0 4px 0 0 #fe5000;
  color: #fe5000;
}
.x-btn .x-navbtn, .x-achor-text-primary {
  padding-top: 40px;
}

For some reason the padding-top is not working and the shadow sits right at the words on the button. The selectors chosen work to place the box shadow, but it seems not to position it.

Any thoughts?

Regards

[christopher]

Hi @guybower1,

I disabled the CSS code for the button as you already have a better way to add the interactive feature. I enabled Particles from the options of the button element and now you can set the positioning and all the stuff that you want there and even add inline CSS code:

I set it to show at the top of the button, but you can change the position wherever you like.

Thank you.

[guybower1]

hi Christopher

I have never used the particles before, so thanks for that tip.

I deleted the CSS I had for the original button and have set a particle above the button, though the issue still remains that the particle sits inside the button, not at the top of the bar. I tried using the Inline CSS box to add padding, but padding-top: 40px simply changed the width of the particle on hover. I then tried adding CSS in the header rather than the Inline CSS box

.x-particle, .x-anchor-particle-primary {
  padding-top: 20px;
}

A positive padding thickened the particle and a negative padding did nothing

Margins simply push the particle up or down, but it disappears once outside the boundaries of the button.

Any thoughts on simply being able to move the particle to any height on the bar, just as with the menu items? The menu items required padding top and bottom of 40px to move the box shadow and then to correctly place the text in the centre again.

Thanks again for your help

[christopher]

Hi @guybower1,

I see what you mean Unfortunately, I did not anticipate that it is not possible to go outside of the boundaries of a button.

Instead I used another method, I added the code below to Element CSS option of teh buttons:

$el {
  overflow: visible;
}
$el:hover::before {
  content: "";
  width: 100%;
  height: 4px;
  display: block;
  background-color: #fe5000;
  position: relative;
  top: -24px;
}

You can learn more about the Element CSS feature here:

Element CSS | Themeco Docs

The code above forces the button to show visible items if it goes beyond the boundaries and uses the before pseudo-class to add that line, but I am not sure why it also adds to the height of the button.

Thank you.

[guybower1]

hi Christopher

Thanks so much for your reply

That is brilliant re the new code. I am with you and can see nothing which would cause the slight addition of height to the button.

Had only used element CSS with the class I had set for certain elements, but I see you did not need to use navbtn class to achieve that.

Thanks for the link. it was an interesting read. Thanks also for taking care of this

Regards

[friech]

We are delighted to assist you with this.

Cheers!