Mobile Menu Multi Line

briankcrain

While on my iPhone, the logo, menu and tools are on the same line. How would I go about putting them on multiple lines? I want my logo to fill the screen width on first line and then have the menu display underneath on a second line.

I absolutely LOVE the theme btw!!!!

Air

Hello:-)

This is not possible out of the box and would require modification. Also it may be not user friendly as you will cover too much of the screen with header. However if you will show me link to your site I will check if I can propose anything.

With kind regards.

briankcrain

Well the problem started when I tried to enlarge the logo on the desktop site. My logo is horizontal and looks tiny, so I need to enlarge it. I used the code......

a.logo{
min-width: 400px;
}

I thought if it looked ok on the desktop, it would be ok on the mobile site. Maybe there is a better fix to enlarge the logo. And I'm ok if I have to keep everything in the mobile header on one line. I do want it to be simple and user friendly. But if I do, is there a way to only show the logo and the main menu and nothing else?
Thank you so mush for your help!!! And again I love this template!!!!

briankcrain

Almost forgot.......
site url is www.javadestinations.com

briankcrain

Hi again. I've been playing around with this and I think I have come up with a solution. I used the following code and it seems to be working correctly.

a.logo{
min-width: 100%
}

However there are 2 things going on.....
1 - On the mobile menu, I would still like to only show the logo and main menu (NO shopping cart or social icons). What customizing do I need to do in order to make this change?

2- Either the logo and/or the main menu is not perfectly centered (I think it is the main menu). There is more space on the right side of the logo than there is on the left. Please let me know how to correct this.

Thank you so much for your time!!!!

Air

Hi there:-)

So I see you already disabled socials on mobile. To disable two icons, and move menu icon to right use this custom CSS:

@media only screen and (max-width: 600px) {
/* hide icons */
#header-tools #basket-menu-switch, 
#header-tools #side-menu-switch {
    display: none;
}

/* move menu icon to side */
#header-tools .tool {
    text-align: right;
}
}

Hope that helps.

With kind regards.

briankcrain

Thank you so much for your help!!!!