New to the community? Start here

Issue with Menu on Computer browser / Mobile browser?

Hi,

I have two major issues with the menu on my site.

1stly – on Computer web browsers the menu is really small, and changing the size of the screen (Control & + or Control & middle mouse button scroll) have no effect) Tested using chrome & Firefox giving the same results – *URL(S) REMOVED*

2ndly – on Mobile devices the menu is cut off, Scrolling down affects the back of the page and not the menu (when the menu button is clicked) resulting in only 5 menu items being shown. up until “xxxxxx Classes” – http://mobiletest.me/iphone_5_emulator/#u=*URL(S) REMOVED*

Please can someone take a look into this for me ?

Support access has been granted

Thanks

Tom

[attachments are only viewable by logged-in members]

Mon, 30 Mar 2015 14:01:59
  • Predrag Dubajic
    • Support

    Hey @Tom,

    Hope you’re doing well today :slight_smile:

    1stly – on Computer web browsers the menu is really small, and changing the size of the screen (Control & + or Control & middle mouse button scroll) have no effect) Tested using chrome & Firefox giving the same results – *URL(S) REMOVED*

    Can you please explain this a bit more?

    Looking on my screen the menu looks fine (see screenshot below), and the zoom is working on Chrome for me.

    Are you looking to increase menu font size?

    2ndly – on Mobile devices the menu is cut off, Scrolling down affects the back of the page and not the menu (when the menu button is clicked) resulting in only 5 menu items being shown. up until “*URL(S) REMOVED* Classes” – http://mobiletest.me/iphone_5_emulator/#u=https://*URL(S) REMOVED*/new/

    Do you have some custom CSS code added, it looks like position: fixed from the code below causes this.

    .site-header .side-pad {
    
position: fixed;
    
background: rgba(0,0,0,0.8);
    
height: 70px;
    
}

    Is there particular reason this is added?

    Best regards,

    Predrag

    [attachments are only viewable by logged-in members]

  • Tom
    • Code Wrangler

    Hi Predrag,

    Seems the first issue is fixed, not sure why it wasn’t working properly for me before.

    for the second issue, it was fixed so that i could have a sticky menu /header so the logo and menu would be constantly visible while a user was looking through the site. is there a way to keep it this way, but when the click the menu the scrolling will be for the menu and not for the background, until the menu is de-pressed or a new page is loaded?

    Thanks

    Tom

  • Predrag Dubajic
    • Support

    Hi Tom,

    With your current structure this may not be that easy to set with the CSS, one way to do it is to make your menu fixed size and scroll through it, you can do that with something like this:

    @media handheld, only screen and (max-width: 767px) {
    
.main-navigation.toggled .nav-menu {
    
overflow-x: hidden;
    
height: 200px;
    
width: 100%;
    
float: left;
    
}
    
}

    You can adjust height and you can do this for multiple media queries to adjust it for each size, or you can calculate window height with jquery and assign that value to your .site-pad class.

    Best regards,

    Predrag