[Resolved] Header with Logo, menu and phone number

[Nacho]

Hello,

I was wondering how could I achieve a header like the images: https://d.pr/i/Rf1O0S and https://d.pr/i/8LrSXV

In desktop have: Logo – Menu – Icon with phone number
In mobile: Logo – Icon with phone number and below centered the hamburguer icon for the menu

The example to follow is in the topic website URL.

[Tom]

Hi there,

Let’s give this a shot:

1. Set the navigation location to “Float Right”.
2. Add your icons/phone number to the Header widget area in Appearance > Widgets.

Then let me know your URL and I can provide some specific CSS to achieve that layout 🙂

[Nacho]

Hello Tom and Happy New Year!

I´ve just done what you told me and edited the post with the website URL so you can check it out.

Thanks a lot and have a good day.

Bests,
-Nacho.

[David]

Hi there,

try this CSS for the desktop:

.inside-header {
    display: flex;
    align-items: center;
}
.header-widget {
    top: unset !important;
}
.header-widget .widget {
    padding-bottom: 0 !important;
}

@media (max-width: 768px) {
    .inside-header {
        flex-wrap: wrap;
    }    
    .site-logo {
        order: -1;
        margin-right: auto;
    }
    .main-navigation {
        flex: 1 0 100%;
    }
}

@media (min-width: 769px) {
    .header-widget {
        order: 5;
    }
    .main-navigation {
        margin-left: auto;
        margin-right: auto;
    }
}

I am not sure there is enough room to have logo and phone number inline on mobile devices. Could add Logo (left) / Menu ( right ) and then have the phone number above or below – let us know

[Nacho]

Hello David,

Thanks for the code.

I´ve just updated the URL of the web that has the logo left and the phone right so you can check them out and see if possible in GP.

Let me know if there is anything I can do to help.

Thanks a lot.

[Tom]

Hi there,

Did you try what David and I suggested? If so, can you switch the URL back to your site so we can see the result/what needs to be tweaked?

Let me know 🙂

[Nacho]

Hello Tom,

Yes the CSS is already in my website. I´ve just swiched the URL back to my site.

Thanks a lot.

[Leo]

So what’s the current issue?

I do see the layout as requested in the topic title:
https://www.screencast.com/t/sl3snu7Qvoz

[Nacho]

Hello Leo,

In desktop is working fine. The problem comes in mobile because we need to have the logo left, phone right and menu below like in this image https://d.pr/i/csejDY

Thanks a lot.

[David]

Updated the CSS here

[Nacho]

Hello David,

It worked! Thanks a lot for your help to all.

Have a nice day.

Thank you!

[David]

You’re welcome

[Author]

Posts