[Resolved] Add margin to navigation

Home Forums Support [Resolved] Add margin to navigation

Home Forums Support Add margin to navigation

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1248871
    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

    #1249475
    Leo
    Staff
    Customer Support

    Hi there,

    How can I see the site in question?

    #1253907
    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

    #1253908
    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

    #1254312
    Tom
    Lead Developer
    Lead Developer

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

    Be sure to mention this topic.

    Thanks!

    #1261542
    Tom
    Lead Developer
    Lead Developer

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

    #1265143
    Tom
    Lead Developer
    Lead Developer

    You could try adding this:

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

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

    #1265593
    Tom
    Lead Developer
    Lead Developer

    You’re welcome ๐Ÿ™‚

    #1466657
    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

    #1466836
    Leon

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

    #1467736
    Tom
    Lead Developer
    Lead Developer

    Glad you got it sorted ๐Ÿ™‚

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.