[Resolved] Padding around Site Title in Navigation on Mobile/Tablet

Home Forums Support Padding around Site Title in Navigation on Mobile/Tablet

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #885034
    Tim

    Hi there,

    I’d like to use my site title as the logo in my main navigation.

    With the default settings, the site title appears a little too far to the left (i.e. not enough padding) on mobile and tablet. On desktops, it looks perfect.

    I’ve used the following CSS to move the site title to the right on mobiles and tablets:


    @media
    (max-width: 768px) {
    .inside-navigation {
    padding-left: 20px;
    }
    }


    @media
    (min-width: 769px) and (max-width: 1024px) {
    .inside-navigation {
    padding-left: 25px;
    }
    }

    20px and 25px look roughly right, but is there specific padding I should use for mobiles and tablets? Is there an option within the GeneratePress options to do this more easily / more exactly?

    Many thanks in advance.

    Tim

    #885081
    Tim

    Hi again,

    On reflection, I think the site title looks best on mobile and tablet devices when it is the same distance from the left side of the screen as the three horizontal bars of the menu icon are from the right side of the screen.

    I’ve tried using 10px with the above CSS to move the site logo to the right, which looks roughly right. Are you able to confirm whether 10px is the right amount of padding, and whether this is the best way to achieve this?

    Many thanks again.

    Tim

    #885084
    Leo
    Staff
    Customer Support

    Hi there,

    So there is 20px of right padding applied to the hamburger toggle currently.

    We can add the same padding to the site title with this CSS on mobile:

    @media (max-width: 768px) {
        .navigation-branding .main-title {
            padding-left: 20pxl
        }
    }

    Make sure to remove your previous CSS.

    Let me know 🙂

    #885096
    Tim

    Hi Leo,

    Thanks very much for your rely.

    I’ve changed to CSS to what you suggested, but it seems that 20px is too much. (It creates a bigger gap than to the right of the hamburger toggle.)

    Is this perhaps because, without the CSS, there is already some padding to the left of the site title?

    Thanks,
    Tim

    #885280
    David
    Staff
    Customer Support

    The nav branding ( site title ) has a left margin of 10px to stop it from hitting the side of the browser. So you need to deduct that 10px from your padding.

    The hamburger icon itself has about 1px of white space within it so visually it looks like it has around 21px padding to the right of it.

    #885303
    Tim

    Thank you very much for that, David! That’s worked beautifully. Much appreciated.

    Cheers,
    Tim

    #885308
    David
    Staff
    Customer Support

    Glad we could be of help

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