Archived topic

Navigation Drop Point & Sticky Navigation Padding

5 replies · Started by Brad on March 28, 2019

Viewing posts 1–6 of 6

March 28, 2019 at 1:02 pm #852842

I have the sticky navigation enabled for All devices, and I have my navigation drop point set to 1040px. When the screen breaks at 1040px, there appears to be extra padding added under the sticky navigation.

1) Is there a way to remove that extra padding below the sticky navigation? It is only present on screens smaller than 1040px, but larger than a mobile screen, so the mobile header can take effect. Everything looks good until you scroll down a little to enable the stickiness, and you will see the extra padding I'd like to remove.

2) I did try some CSS to reduce the padding, but now the navigation text doesn't appear to be centered within it's own list. For example, "Who We Are" seems pushed or floating right, and so does "Schedule Consultation".

Thanks in advance!

March 28, 2019 at 3:31 pm #852935

Hi there,

1) Try this CSS:

@media (max-width: 1040px) and (min-width: 769px) {
    .site-logo, .site-branding {
        margin-bottom: 0;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

2) Can you give #1 a shot first and let me see it?

Let me know :)

March 29, 2019 at 11:30 am #853740

Hi Leo,

I added the first CSS snippet and it looks great.

Any thoughts on whats pushing the primary navigation text to the right, specifically “Who We Are” and “Schedule Consultation”?

Thanks again for the support!

March 30, 2019 at 8:25 am #854375

I believe that's the 20px of padding you added:

* .main-navigation .main-nav ul li a {
    padding-right: 20px;
}

If you reduce that to something like 5px, it should look like the others.

April 1, 2019 at 10:15 am #856121

Worked like a charm. Thanks for the awesome support guys. I'm loving this theme and the premium add-ons.

April 1, 2019 at 4:03 pm #856329

Glad we could help :)

This archived topic is closed to new replies.

Start building better websites today.