Mobile Menu

Home Forums Shudh theme support Mobile Menu

Tagged: 

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #87605
    Derek
    Member
    • Topics: 26
    • Replies: 104
    • Total: 130
    Member since: July 27, 2016

    Hi Guys,

    In the mobile menu on the Shudh theme the logo and menu bar take up a lot of space.

    Is there a way using custom CSS that the header section on mobile can be tightened up like you see on a lot of new websites to show the logo on the top left and the hamburger menu on the top right in the same bar?

    So the navigation would not read Menu, the bar would simply be like below wit the slider below it:
    Logo Menu
    Content

    Essentially I want it to look like the desktop view if the menu items were all behind a hamburger menu. One line with the logo minimized.

    Use http://collinsviptours.com/ to test.

    Thanks

    Derek

    #87634
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25464
    • Total: 25464
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

    Add this code there:

    @media screen and (max-width:980px) {
    .logo { float: left !important;}
    .header_right { float: right !important; width: 100%;}
    .mobile_nav a { width: 47px; box-sizing: border-box; text-indent: -9999999999px; position: absolute; right: 20px; top: 30px;}
    }

    Regards,
    Chris

    #87650
    Derek
    Member
    • Topics: 26
    • Replies: 104
    • Total: 130
    Member since: July 27, 2016

    Hi Chris,

    Thanks for that, although is there a way that the hamburger menu could float in the middle on the right instead of hanging down from the top? Also is there a way to change the colour of the hamburger menu?

    Thanks

    Derek

    #87655
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25464
    • Total: 25464
    Member since: August 16, 2013

    Hi,

    Can you send us the screenshot of your issues? Upload your screenshot on imgur.com and paste the share url here.

    Regards,
    Chris

    #87693
    Derek
    Member
    • Topics: 26
    • Replies: 104
    • Total: 130
    Member since: July 27, 2016

    Hi Chris,

    Apologies in the delay in getting back to you. Link to imgur image is https://imgur.com/a/fn9Li

    The Hamburger menu is not aligned with the logo see image in the link, also I have the header fixed when scrolling but scrolling is showing above the header instead of behind it. See image in the link too (I’ve combined them both for you to see). In the standard header the scrolling is behind the header on mobile.

    Also I want to change the color of the 3 lines within the hamburger menu?

    Thanks

    Derek

    #87823
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25464
    • Total: 25464
    Member since: August 16, 2013

    Hi,

    Okay, kindly send us your URL of the site and WordPress admin details (Username & Password) via sktthemes.net/contact Please mention this forum URL while replying so that we understand what needs to be done.

    Regards,
    Chris

    #87845
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25464
    • Total: 25464
    Member since: August 16, 2013

    Hi Derek,

    This issue was resolved from our end. Kindly check and confirm.

    Regards,
    Chris

    #87852
    Derek
    Member
    • Topics: 26
    • Replies: 104
    • Total: 130
    Member since: July 27, 2016

    Hi Chris,

    When minimised on desktop the menu becomes aligned but on mobile it doesn’t. See images from my phone on the screenshot in the link below:

    https://imgur.com/a/tW758

    The menu is lower than previously, it sits behind the menu when clicked and the scroll bar shows in front of it when scrolling?

    Thanks

    Derek

    #87864
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25464
    • Total: 25464
    Member since: August 16, 2013

    Hi Derek,

    Issue resolved. Kindly check and confirm.

    Regards,
    Chris

    #87874
    Derek
    Member
    • Topics: 26
    • Replies: 104
    • Total: 130
    Member since: July 27, 2016

    It’s aligned now but still showing behind the scrolling on mobile?

    Also can I change the colour of the bars on the hamburger menu?

    Lastly only the bottom bar on the hamburger menu drops the menu down the others don’t. I clicked on it a number of times on my phone before the menu dropped down. You have to click right at the bottom of the menu for it to work?

    #87887
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25464
    • Total: 25464
    Member since: August 16, 2013

    Hi Derek,

    Issue resolved.

    Regards,
    Chris

    #87891
    Derek
    Member
    • Topics: 26
    • Replies: 104
    • Total: 130
    Member since: July 27, 2016

    Hi Chris,

    I had the header staying there on purpose, I just wanted the scroll to be behind it. you have removed the header on scrolling?

    The menu doesn’t work very well. Can you try it your end on mobile and see as it works intermittently for me.

    It drops down one second and won’t the next?

    Also can I change the menu bars color?

    Thanks

    Derek

    #87901
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25464
    • Total: 25464
    Member since: August 16, 2013

    Hi Derek,

    I am not sure what you mean by this. Can you may be draw or point out in an image?

    You can upload image in imgur.com and share the link here.

    Regards,
    Chris

    #87914
    Derek
    Member
    • Topics: 26
    • Replies: 104
    • Total: 130
    Member since: July 27, 2016

    Menu button doesn’t work too well. If you check the site on your smartphone it doesn’t work seemlessly. It’s like the box itself isn’t linked to show the menu dropdown, just the last bar of the 3 is?.

    Also I added a sticky plugin for the header to show when scrolling. when you try to fix that it now doesn’t appear when scrolling.

    I want to change the color of the 3 bars in the hamburger menu?

    thanks

    #87926
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25464
    • Total: 25464
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

    Add this code there:

    @media screen and (max-width:767px) {
    .mobile_nav a { z-index:99999999;}
    }

    Regards,
    Chris

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.