[Resolved] Making sticky navigation same as Primary Navigation

[Binu]

Hi,
I just want to make sticky navigation of mysite look like primary Navigation. The primary navigation has a logo aligned to the left and 120 px padding on both left and right side.

The sticky navigation (with logo) appears full width. Is there any way to add 120 px padding on left and right sides, using custom CSS? How can I achieve that?

Thanks
Binu

[Binu]

Hi,
I have achieved it .bu using following css. is this the right way to do that?

.nav-float-right .is_stuck.main-navigation ul {
padding-right: 120px;
}
/* sticky nav logo padding*/
.main-navigation.sticky-navigation-transition .navigation-logo img {
padding-left: 120px;
}

[Tom]

That should work fine, but check how it looks on mobile.

You can make it so your CSS is for desktop only by adding it in this media query:

@media (min-width: 769px) {
    /* your CSS in here */
}

[Binu]

Thanks a lot for the help, Tom.

Binu

[Tom]

You’re welcome 🙂

[Author]

Posts