[Support request] How to fix the padding / margin on sticky nav bar and blog posts

[Mark]

Hi there,

First of all thanks for creating such a beautiful theme, I really like Generate Press and love the fact that it has such fast loading times, that’s brilliant.

I’ve been facing a couple of issues with margins / padding on the sticky nav bar and blog posts and would be grateful if anyone could help me fix them.

1) Sticky nav bar
The primary navigation looks perfectly fine, but when I scroll down the page and therefore activate the sticky nav bar, the “Contact us” button on the right hand side of the bar goes all the way to the right hand side of the nav bar for some reason, with no margin / padding.

2) Blog posts
On blog posts I have a similar issue: the date and author of the post (which in my case are above the featured image), and the social media sharing buttons, category, related blog posts and Comment section (which are all below the actual blog article) are touching the left hand side of the screen with no margin / padding.

Unfortunately I can’t show you my site as it’s not live yet.

Thanks a lot for your help, much appreciated!

[David]

Hi there,

really tricky to diagnose without seeing the site. Is the site hosted? If so could you provide us with temporary login to see the site?

[Mark]

Hi David,

Thanks for your reply. The site is now up-and-running, it’s http://atatiki.co.uk/
I’m on GP 2.2.2 and Pro 1.7.7.

Thanks a lot!

[David]

So:

1. Customizer > Layout > Primary Navigation –>Inner Container Width – set this to Contained

2. Elementor does this stupid thing of slapping full width on the post. Before fixing that, may i ask what your intentions with the post pages are? I personally wouldn’t use the Elementor editor for writing posts as it may cause you issues in the future if you ever needed to remove Elementor.

[Mark]

1. I’ve done that, but I can’t see any difference?

2. For blog posts, are you suggesting I use the WP Editor or GP Sections?

Thanks!

[David]

Ok 1 fixes it on wider screens, smaller screens needs a little margin on the button. So edit this CSS:

@media (min-width:969px) {
    .main-navigation .main-nav ul li.nav-button a {
        background-color: #ed4410;
        border: 2px solid #000000;
        color: #ffffff;
        line-height: 35px; /*this number will likely need to be adjusted*/
    }
}	

And include a margin-right: 10px; property in that rule.

Personally i just use the Classic or WP Block (Gutenberg) editor for posts. Let me know

[Mark]

Hi David,

Good to know about WP Gutenberg, I’ll use that going forward, thanks a lot.

Regarding the CSS, I’ve pasted your code into Simple CSS (including the margin-right:10px;), but still can’t see any difference am I doing something wrong? Apologies, I’m not a coder, so I’m following instructions slightly blindly here. 🙂

[Mark]

Sorry David, just to confirm: I did actually already have

@media (min-width:969px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #ed4410;
border: 2px solid #000000;
color: #ffffff;
line-height: 35px; /*this number will likely need to be adjusted*/
}
}

in the “Additional CSS” section, and now I added the margin-right:10px to it but again – nothing has changed.

[David]

Looks like it is working to me on the nav and sticky nav. May need to clear your browser cache and if need be increase the px in the margin-right: 10px; property.

[Mark]

Good old cache. 🙂 All working now, thank you!

[David]

Awesome – glad to be of help!

[Author]

Posts