Archived topic

Making sticky navigation same as Primary Navigation

4 replies · Started by Binu on October 19, 2017

Viewing posts 1–5 of 5

October 19, 2017 at 9:05 pm #406703

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

October 19, 2017 at 10:01 pm #406727

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

October 19, 2017 at 11:33 pm #406744

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 */
}

October 20, 2017 at 12:21 am #406753

Thanks a lot for the help, Tom.

Binu

October 20, 2017 at 10:10 am #407101

You're welcome :)

This archived topic is closed to new replies.

Start building better websites today.