[Resolved] Telephone Number & Email Address Top Bar Alignment on Mobile

[Duncan]

Hi there

I’m looking for some help and assistance.

I’m happy with the layout of the top bar on my site on desktop and tablet.

However, when viewing the site on mobile (vertical) the telephone number and email address are aligned to the left and not the centre.

Can you therefore advise me how to fix this please?

Please bare in my mind I’m a bit of a novice!

Thanks in advance

[Leo]

Hi there,

Modify this:

.top-bar p {
    float: left;
    margin-left: 18px;
    margin-bottom: 10px;
}

to

@media (min-width: 769px) {
    .top-bar p {
        float: left;
        margin-left: 18px;
        margin-bottom: 10px;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know 🙂

[Duncan]

Hi Leo

Many thanks, worked a treat.

However, there now isn’t much space between the bottom of the Email address and the top of the logo, how do I more space?

Thanks in advance.

[Leo]

Hmm actually let’s try another method.

Can you try adding the two elements as two separate Custom HTML widgets instead of using <p> tag?

Then we should only need one CSS to tweak the position.

Let me know 🙂

[Duncan]

Hi again Leo

Thanks for the prompt response.

Apologies for my ignorance but how do I do this? Way over my head to be honest!

Thanks again

[Duncan]

Hi Leo

Just a quick update for you.

I’ve managed to add the phone number and email address as two separate Custom HTML Widgets in the top bar after all and they sit where I want them too in desktop.

However, in mobile and tablet mode they’re not aligned correctly. I’ve left in the amended code you sent me earlier so I take it this now needs modified?

I would like the telephone number and email address to sit on the one line aligned to the right in tablet mode horizontal (same as currently displays on desktop), and in vertical tablet mode I would like them to sit on the one line aligned to the centre.

On mobile horizontal mode I would like them to sit on the one line aligned to the centre, and in vertical mobile mode I would like them to sit on two lines aligned to the centre.

Hopefully this all makes sense, you’re help and assistance is very much appreciated Leo!

Thanks in advance

[David]

Hi there,

can you edit the Top Bar padding and put the left and right back to 10px. And the add this CSS to the Customizer > Additional CSS:

.inside-top-bar {
    display: flex;
    justify-content: center;
}
.inside-top-bar aside:last-child {
    margin-left: 30px !important;
}
@media (min-width: 1024px) {
    .inside-top-bar {
        justify-content: flex-end;
    }
}

[Duncan]

Hi David

Thanks for getting back to me, your help and assistance is very much appreciated.

I’ve done as you suggested, however I’ve now got the following layout issues with the top bar:

1. On desktop view (and tablet horizontal view) the right hand edge of the telephone number is now not aligned with the right hand edge of the “T” in the “CONTACT” link in the nav bar below.

2. In vertical view on tablet, and horizontal view on mobile, it’s aligned to the centre which is great. However, I’d like to add some space between the foot of the email address and telephone number and the top of the logo below.

3. In vertical view on mobile the top bar layout is all over the place.

Again, hopefully this all makes sense.

If you can therefore assist me further I’d really appreciate it.

Thanks in advance

[Duncan]

Hi again David

Just a quick update, I managed to sort issue 1 outlined in my last message my adjusting the right top bar padding to 35px.

Desktop and tablet horizontal layout is now therefore sitting correctly.

However, if you can still assist me with points 2 and 3 outlined in my last message that would be great.

Thanks

[Tom]

Hi there,

2. You can adjust the mobile padding of the header element in Customize > Layout > Header. That will allow you to add top padding to the header.

If you need to do it before 768px, you can use CSS like this:

@media (max-width: 1000px) {
    .inside-header {
        padding-top: 40px;
    }
}

Adjust the 1000px as needed.

3. That’s happening because there isn’t enough space for them to appear in line. You can try doing this:

@media (max-width: 500px) {
    .inside-top-bar {
        flex-direction: column;
    }
}

[Duncan]

Hi Tom

Thanks for your prompt reply and resolution, everything’s looking good now.

From an SEO and best practice perspective does it matter if the additional CSS is inserted in the “Child: Stylesheet (style.css)”, or the “Additional CSS” section in the “Customise” section in the WordPress dashboard?

Lastly, I’d like to thank you and your team for your help and assistance today, it’s been excellent.

I’ve not been using GeneratePress for long so I appreciate the patience of you and your team.

Thanks again

[David]

Glad to hear you got it resolved.
Best practice is to always use a child theme for your style.css – but a small amount ( less than 400/500 lines ) in Additional CSS is not a problem regarding performance.

Glad you’re enjoying the service – feedback is really appreciated.

[Author]

Posts