Mobile Screens and Keeping Mobile Hamburger to the right of logo

Support
#1

Hi,

I am having an issue with my site when going on different mobile screens.

It keeps putting the menu onto another line, now I have added some CSS to try resolve this, but is there an easier method for this than adding in a fair few CSS rules for each size screen.

E.g.
/Vertically Align Hamburger Menu on mobile screens <=740px/
@media (max-width: 740px) {
.masthead-inline .x-btn-navbar {
margin-top: 28px !important;
}

/Stop Mobile Hamburger going to next line on smaller screens/
@media(max-width: 740px){
.x-brand img {
max-width: 360px;
}
}

/Stop Mobile Hamburger going to next line on smalller screens <=480/
@media(max-width: 480px){
.x-brand img {
max-width: 250px;
}
}

/Vertically Align Hamburger Menu on mobile screens <=480px/
@media (max-width: 480px) {
.masthead-inline .x-btn-navbar {
margin-top: 18px !important;
}

/* Change Header height on mobile screen to 60px*/
@media (max-width: 480px) {
.x-navbar {
height: 60px !important;
}
}

Would it be possible to do something like have a margin or padding to the right of my logo whenever the hamburger menu is in place (so smaller than 740px).

So when the logo is responsively resized by the site there is always room for the menu to the right?

Orrr

Can I change the coding that resizes the logo so that it resizes it a bit smaller than currently, therefore allowing room for the hamburger menu at 32px in size - I am not sure if this is CSS or not within the X Theme.

Thanks.

#2

Hey Tom,

Please try this code instead:

@media (max-width: 746px) {
    .x-navbar-inner .x-container {
        display: flex;
        justify-content: center;
    }

    .x-brand {
        max-width: 83%;
    }

    .masthead-inline .x-btn-navbar {
        margin-top: 0 !important;
        display: flex;
        align-items: center;
        max-width: 10%;
        margin-left: 20px;
    }

}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

#3

Jade, that’s amazing.

All understood with regards to that code :slight_smile:

Unfortunately it didn’t work 100% with me still having to use the .x-navbar CSS below to reduce that size of the navbar when it hits 480px screens due to it just leaving lots of white space below the logo/hamburger menu otherwise (e.g. on the iPhone X).

On investigating this it seems that basically the navbar won’t go below 80px on mobile layouts - my NAVBAR TOP HEIGHT (PX) in the Header section is set to 80px - setting this to 0px allows your CSS to work amazingly and the navbar reduces in size fully when the hamburger menu is in place. Unfortunately this doesn’t work as a solution to the issue though as it means the desktop site is all a mess :stuck_out_tongue:

This is the code I used before your solution to bring the navbar up to the logo/hamburger menu on screens smaller than 480px.

@media (max-width: 480px) {
.x-navbar {
height: 60px !important;
}
}

Maybe just something to say if screen is smaller than 746px then ignore the “NAVBAR TOP HEIGHT (PX) in the Header section” option.

Thanks.

#4

No worries, I have resolved my own query by adding the below to your CSS.

.x-navbar-inner {
  min-height: 10px
}

This then basically ignores the 80px min setting - but only on screens smaller than 746px - and it then sets it so low it never becomes an issue.

There may be a better way to do this, what do you think?

Thanks, Tom.

#5

Hi Jade,

This causes this to happen to the mobile menu though?

It’s amazing and I hope you’ll just be able to fix it as it’s exactly what I’m after :slight_smile:

Just with the menu on mobile working obviously.

Thanks.

#6

Hello Tom,

Please update the code given by @Jade and use this instead:

@media (max-width: 746px) {
    .x-brand {
        max-width: 70%;
    }
}

Please let us know how it goes.

#7

Oh no :frowning: that didn’t work either.

The menu is staying to the right and not opening on the next line.

I am using Icon 1 and so should look like that when clicking the menu hamburger.

Many Thanks.

#8

The solution is so perfect apart from the menu isn’t opening in the next line :frowning:

See here in mobile view via Chrome Dev: http://demo.theme.co/icon-1/

Thanks.

#9

Hello Tom,

You will need to update you custom css block and use this code instead:

.x-nav-wrap.desktop{
    float:left;
    margin-left:25px;
}

.x-navbar .desktop .x-nav>.current-menu-item>a>span{
    border-color:rgba(255,128,102,1);
}

.x-navbar .mobile .x-nav .current-menu-item>a{
    border-color:rgba(255,128,102,1);
}

@media (max-width:740px){
    .masthead-inline .x-btn-navbar{
        margin-top:18px !important;
    }
    
    .x-brand{
        max-width:70%;
    }
    .x-navbar-inner{
        min-height:1px
    }
}

@media (max-width:480px){
    .x-navbar{
        height:60px !important;
    }
}

We would love to know if this has worked for you. Thank you.

#10

Thanks, I guessed so :frowning: Shame.

That’s my original CSS I think.

Oh well.

Thanks for your help all.

#11

I am going to leave the code @Jade put here in place as this is what I wanted, and although the menu won’t open really at all in view on mobile devices, the actual navbar re-sizes properly now.

I will look forward to fixing the menu drop down using Jade’s code as well.

IMHO I think @Jade 's code should be part of X Theme as standard :slight_smile:

Thanks.

#12

Hi Tom,

Ok let’s enhance Jade’s CSS code, please update Jade’s CSS code provided above to this:

@media (max-width: 746px) {
    .x-navbar-inner .x-container {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .x-brand {
        max-width: 83%;
    }

    .masthead-inline .x-btn-navbar {
        margin-top: 0 !important;
        display: flex;
        align-items: center;
        max-width: 10%;
        flex-basis: 100%;
        justify-content: flex-end;
    }
    .x-nav-wrap.mobile {
    	width: 100%;
    }

}

Hope it helps,
Cheers!

#13

Amazing thanks @friech !

Is it possible to just have the touch area for the menu aligned to the hamburger menu, at the moment there is a lil dead area to the right of the menu. See below.

Thanks.

#14

Hi Tom,

Actually the dead area there is the left side, that toggle menu is already on the right edge of the container because of the justify-content: flex-end; we applied to it.

To resolve that, please update that line to justify-content: center;

The small downside of that is the toggle menu now won’t be in the right edge, but yeah I think that is better than flex-end

Hope it helps,
Cheers!

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.