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

[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

[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

[Leo]

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 🙂

[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

[David]

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.

[Tim]

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

Cheers,
Tim

[David]

Glad we could be of help

[Author]

Posts