[Resolved] Adding a Line Under Primary Navigation on Blog Posts and Pages Only

[April]

Hi there!

I was hoping for some help with adding a line under the primary navigation and logo for the full width of the page. I want the line to only appear on blog posts and pages (not the homepage or the archives).

Thanks so much. : )

[Elvin]

Hi April,

Any chance you can provide any mockup image of how you want the line to look like?

You can try this CSS out:

nav#mobile-header, header#masthead {
    border-bottom: 2px solid red;
}

main#main {
    margin-top: 0;
}

.inside-article {
    padding-top: 0 !important; 
}

After adding this, remove the negative margin top on the first KT block on the top of the content.

Here’s how to add css – https://docs.generatepress.com/article/adding-css/

Here’s how it’ll look like – https://share.getcloudapp.com/o0uPN1jm

You can replace the color red on the border-bottom: property to the color of your preference.

[April]

Thank you, Elvin! I was able to change the code to get the appearance I want.

It seems now that my content is too high. On the archive pages, it’s getting covered by the banner I’ve added in. How can I move the archive content and blog post content lower?

I tried changing the content padding but it is no longer working.

[Elvin]

It seems now that my content is too high. On the archive pages, it’s getting covered by the banner I’ve added in. How can I move the archive content and blog post content lower?

I actually see the line. But its significantly harder to see if there’s a banner (especially ones with darker color) as the contrast is lost.

Consider making the line thicker by increasing 1px to your preferred thickness. 😀

[April]

Oh, sorry. I meant the list of featured images of the blog posts in the archives is being covered. Also, in the blog posts, there isn’t enough white space between the line and the post titles.

For example, in the breeds archive, you’ll see the images are now being covered by the element I added. The images got covered when I added the new CSS.

I tried fixing it by adjusting the content padding, but it’s not working.

[Elvin]

Can you change this CSS:

main#main {
    margin-top: 0;
}

To this:

body.home main#main {
    margin-top: 0;
}

[April]

Everything looks perfect now! Thank you so much. You’re the best! : )

[Elvin]

No problem. Glad to be of any help. 😀

[Author]

Posts