[Support request] header with navigation

[eran]

How can I make the site logo + tagline and the menu at the same line only in the mobile?
I can do it with navigation as header but it affect my desktop as well

Plus, right now the menu is before my header but in mobile the menu is above my header. why it changes?

[David]

Hi there,

Remove this CSS:

/* make the logo on top keft side */
@media (max-width: 768px) {
    body {
        display: flex;
        flex-direction: column;
    }

    nav#site-navigation {
        order: -1;
    }
	.main-navigation .menu-toggle {
        text-align: left;
    }
	
}

And add this CSS:

@media(max-width: 768px) {
    .site-header .site-branding-container {
        flex-direction: unset;
    }
    .site-header .site-branding-container .site-logo {
        margin-right: 20px;
    }
    .main-navigation .inside-navigation {
        position: static;
    }
    .main-navigation .menu-toggle {
        position: absolute;
        top: 20px;
        left: 10px;
        z-index: 1000;
    }
}

[eran]

The logo is on the menu in mobile

[David]

Add this CSS to adjust the size and position on really small screens:

@media(max-width: 500px) {
    .site-header .site-branding-container .site-logo {
        margin-right: 10px !important;

    }
    .site-header .site-branding-container .site-logo img {
        max-width: 40px;
    }
    .site-header .site-branding-container .main-title {
        font-size: 13px;
    }
    .main-navigation .menu-toggle {
        top: 5px !important;
    }
}

[eran]

it worked.
now the sticky navigation doesn’t work.

[David]

Are you able to create a logo that container the logo image and the text ?
As it would save a lot of CSS as you can just add it as the Mobile Header Logo ?

[eran]

do you know what dimensions I need?

[eran]

I need to tell the designer the dimensions.
do you know what i need?

[David]

i would suggest no larger than 60px x 240px

[eran]

the width should be smaller then the height?

[David]

No sorry i should have said 60px height, 240px wide.

[eran]

Ok I have the logo.
now to use header as navigation and add the new logo?

[David]

Leave your current header as is.
But in Customizer > Layout > Header, enable the Mobile Header, and there you will be given a field to add your mobile header logo. Add your new logo to that.

Let me know once thats done.

[eran]

Done.
look like the logo is too small.

[David]

See here:

https://www.screencast.com/t/yzlqH2dCw4a

The image uploaded is square 960px x 960px with a lot of negative space around it.
Can the original be cropped to its size, as highlighted by the green border i added ? And then re-uploaded.

[Author]

Posts