Menu bar not working right

[CPCR]

I have my menu set at “fix to top on scroll” but when it hits the top it shifts to the right, just a little. This does not bother me too much, but if there is a way to fix it I would like to do that.

The site is https://cadillacpc.com

I installed Aspen when it was released and just changed over to Weaver yesterday, smooth transition, took only a short time to make my site look just like it did. The only issue I have is this menu bar behavior.

[scrambler]

Interesting, this is a weird interaction because of the 2px border you have on the wrapper.

There are two possible CSS fix for it. Try them separately and use whichever works best for you

I think the simplest is to add the Rule below to the theme Global Custom CSS rule box

#wrapper {box-sizing:content-box;}

OR use the one below

#inject_fixedtop,#inject_fixedbottom,.wvrx-fixedtop,.wvrx-fixonscroll {max-width: 1198px;}

[CPCR]

I can’t seem to find where do to that. I used Aspen since it was released, I just switched to Weaver Xtreme a couple of days ago and this option/setting is not in the same spot as it was in Aspen.

Could you tell me where I can fine the Global Custom CSS rule box?

[scrambler]

in the legacy Admin (assuming you have installed the weaver Xtreme Theme support plugin , which you should), in Main Options > Fonts & Custom > Custom CSS

In the customizer (where mode) > Custom CSS > Global Custom CSS

 

[CPCR]

Neither fix worked, but thank you for trying, and thanks for showing me where to put the CSS. I’ve been using Aspen for a long time, around 12 years I think, so I keep getting that mixed up with Weaver. It turns out I had already added some CSS, I forgot about it and forgot how I got there. It’s been a few days now, I’m getting to know my way around it better.

[scrambler]

May be I am not seeing what you are seeing.

Do you see a big shift, because I only saw a tiny 2px one.

If you only see a tiny 2px shift to the right and the first rule I gave you does not fix it, can you leave the rule in and post back so I can see why it is not fixing it.

[CPCR]

Yea, it’s a 2px shift, that’s why I’m not so worried.

I placed the first code back in there exactly how you posted it:
#wrapper {box-sizing:content-box;}

[scrambler]

As far as I can see the rule is active and it works.

I put a post-it on one of the menu separators when the menu is close to the top before it gets fixed, and then kept scrolling to fix it and the separator remained aligned with the post-it.

I also opened the developer tools and while the menu is fixed with the post-it on, I unchecked the rule you added, and the menu shifts.

So if you are still seeing the shift, try clearing all your caches

[CPCR]

I see it now, working great. Thank you very much for helping with this

[Author]

Posts