[Resolved] Add margin to navigation

[Leon]

Hi,
My header has a 20px margin to the left.
The container also has a 20px margin to the left.
Inbetween is the navigation bar.

I try to add the same 20px margin to the navigation bar, but that seems impossible. There doesn’t seem to be a setting for this, and I can’t find the right css tag either.

I hope you can help.
Thanks,
Leon

[Leo]

Hi there,

How can I see the site in question?

[Leon]

You’ll have to login as admin, since the site is behind a maintenance plugin.

http://www.mbo-today.nl/test / admin / ***

Thanks, Leon

[Leon]

You’ll have to login as admin, since the site is behind a maintenance plugin.

http://www.mbo-today.nl/test/wp-admin / admin / *****

How do I discreetly send you the password?

Thanks, Leon

[Tom]

Please send the username and password through this form: https://generatepress.com/contact

Be sure to mention this topic.

Thanks!

[Tom]

So instead of trying to add margin to the navigation, I would:

1. Remove the margin added to the container.
2. Set the header to “Full” width
3. Set the inner header to “Contained”
4. Make sure your header has 20px padding all around
5. Add this CSS:

.inside-header {
    box-sizing: content-box;
}

[Leon]

Thanks Tom,

This has solved my problem in desktop view. Unfortunately, in tablet view the text has no margin left now. I can set a margin for the phone, but not for the tablet. Is there a way to fix that?

Or should this be another topic?

Thank you, Leon

[Tom]

You could try adding this:

@media (max-width:1130px) and (min-width: 769px) {
    .site-content {
        padding-left: 20px;
    }
}

[Leon]

Thank you very much, this worked very well.
Kind regards, Leon

[Tom]

You’re welcome 🙂

[Leon]

Hi,
Sorry to reopen this thread, but I’d like to add a question to it.
Our site is online now and works very well. There are two cosmetic flaws we’d like to fix.

We added (as you suggested) this css

@media (max-width:1130px) and (min-width: 769px) {
.site-content {
padding-left: 20px;
}
}

That worked well.
Looking at the site on various phones and tablets we noticed that there is no margin on the right. So I thought, I add

padding-left: 20px;

to the css you provided, but that didn’t do anything.
I hope you still have acces, if necessary.

(My other question is a different topic.)

Thanks, Leon

[Leon]

Never mind, I’ve already managed to fix it.

[Tom]

Glad you got it sorted 🙂

[Author]

Posts