[Resolved] after adding secondary menu hover border,page shakes a bit like a jerk

[Jai Hari Shankar]

Hi there.After i added the secondary menu hover border,if i just hover over it,the below section shakes a little bit.
You can check it in the below link.

https://stockwizaards.com

[David]

Hi there, not a problem, borders applied that way will expand the container, an alternative method would be this CSS:

.main-navigation .menu>.menu-item>a:hover:after {
    content: "";
    position: absolute;
    right: 50;
    left: 50%;
    bottom: -1px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: block;
    width: 80%;
    height: 2px;
    background-color: currentColor;
    -webkit-transition: 0.3s width ease;
    transition: 0.3s width ease;
}

[Jai Hari Shankar]

Thanks a lot.First of all i asked for secondary navigation,than why you are sending main navigation code.
As per your given code i deleted first line and its working.
here is the code

.secondary-navigation .menu-item>a:hover:after { content: “”; position: absolute; right: 50; left: 50%; bottom: -1px; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: block; width: 80%; height: 2px; background-color: #000000; -webkit-transition: 0.3s width ease; transition: 0.3s width ease; } }

Just let me know is this code right ?? Its working without jerk now though.

[Tom]

Looks good to me. You can just replace .main-navigation in the code David supplied with .secondary-navigation.

[Jai Hari Shankar]

YES TOM i have done tha.Now i am facing a new issue.I applied the background image for primary navigation but it is not coming to the full width.I applied with 4000 px width image and 2000 px image it is not coming to full width.KINDLY CHECK IN BELOW LINK

https://stockwizaards.com

[Tom]

I’m not seeing a background image currently, but you’ll need to use your navigation as your header to make it go full width: https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

[Jai Hari Shankar]

Tom i have used the navigation as you said above and now my image displays properly but i dont want my logo inside it.I followed your https://docs.generatepress.com/article/navigation-logo/#navigation-as-header but still its not what i want.I want it completely leftside- outside the primary navigation.Please refer to this website for example-https://www.premierleague.com/ .So far i have change my website.Kindly check-https://stockwizaards.com

[David]

This is related to this topic:

https://generatepress.com/forums/topic/primary-navigation-menu-going-outside-its-background-image/

If you can decide which topic to keep the thread going please. And please close the others as resolved. It’s getting very confusing 🙂

[Author]

Posts