[Resolved] Make Mobile Menu and Search Next to Logo

[Ivaylo]

Hi, is it possible to make the mobile menu and search button in one line with the logo. On the left the menu and on the right the search. Also the menu to show only the three lines and not MENU text.

Here is an example:
https://www.homestratosphere.com/

[David]

Hi there,

can I see your site that you want to apply this too ?

[Ivaylo]

Sure, it is in the private section.

[David]

Ok,

1. Customizer > Layout > Primary Navigation, in the Mobile Menu label field: remove the text, so its left empty.
2. Customizer > Layout > Header enable the Mobile Header, and add a mobile header logo.

Once thats done, let me know and ill provide the CSS to re-arrange the header items

[Ivaylo]

All is done.

[Leo]

Give this CSS a shot:

@media (max-width: 768px) {
    #mobile-header .site-logo.mobile-header-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0;
    }
    #mobile-header button.menu-toggle, #mobile-header .menu-bar-item > a {
        line-height: 70px;
    }
    #mobile-header .site-logo.mobile-header-logo img {
        height: 70px;
    }
    #mobile-header .menu-bar-item > a {
        padding-left: 20px ;
    }
}

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

[Ivaylo]

Hi Fernando, thanks. Looks like it is working, but the logo is smaller than before and it should be menu on the left and search on the right.

Now it is menu on the right and search on the left.

[Ivaylo]

I’ve changed to this:

	/* Logo between menu and search on mobile*/
@media (max-width: 768px) {
    #mobile-header .site-logo.mobile-header-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0;
    }
    #mobile-header button.menu-toggle, #mobile-header .menu-bar-item > a {
        line-height: 88px;
    }
    #mobile-header .site-logo.mobile-header-logo img {
        height: 88px;
    }
    #mobile-header .menu-bar-item > a {
        padding-left: 20px ;
    }
}

so that the size of the logo is now better. Is this CSS correct?

I also have this one in my custom CSS:

	/* FIXed CLS issues on mobile*/
	@media only screen and (max-width: 600px) {
 
	
		.site-header {
    position: relative;
    min-height: 88px;
}
	}
	

Do I still need this CSS code or should I remove it now?

P.S. My logo image is 200×87 px

[Ivaylo]

Any update? Thanks!

[David]

Remove that CSS and use this instead:

@media(max-width:768px) {
    #mobile-header {
        padding: 0 10px;
    }
    #mobile-header button.menu-toggle {
        order: -1;
        margin-right: auto;
    }

    #mobile-header .site-logo.mobile-header-logo img {
        height: 88px
    }

}

[Ivaylo]

Do you mean to remove both CSS codes:

	/* Logo between menu and search on mobile*/
@media (max-width: 768px) {
    #mobile-header .site-logo.mobile-header-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0;
    }
    #mobile-header button.menu-toggle, #mobile-header .menu-bar-item > a {
        line-height: 88px;
    }
    #mobile-header .site-logo.mobile-header-logo img {
        height: 88px;
    }
    #mobile-header .menu-bar-item > a {
        padding-left: 20px ;
    }
}

and

/* FIXed CLS issues on mobile*/
	@media only screen and (max-width: 600px) {
 
	
		.site-header {
    position: relative;
    min-height: 88px;
}
	}

and replace them with the one you just sent?

[David]

yes, you can remove both of those CSS codes.

[Ivaylo]

Thanks, I replaced both codes with yours and it’s working fine. Menu is on the left, search on the right.

One more thing though – when I click on search icon it makes some space white and have a blinking cursor. Can we have this blank space hide the logo and menu icon and have a border around it.

I’m looking for the same output as the one on http://www.homestratosphere.com ( mobile ). Please take a look and see what I mean as it is hard to explain it all here with words.

[David]

Try this CSS:

.navigation-search {
    border: 1px solid #f00;
    border-radius: 6px;
    overflow: hidden;
    max-width: calc(100% - 40px);
    top: 20px;
}

NOTE: GP 3.3 Theme has just gone into alpha and it has a new Search Modal:

https://generatepress.com/generatepress-3-3-0/

[Ivaylo]

this CSS works fine! Thanks! Where can I see a live version of the new GP 3.3 Search Modal?

[Author]

Posts