Mobile Menu

[Derek]

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

[Sonl Sinha]

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

[Derek]

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

[Sonl Sinha]

Hi,

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

Regards,
Chris

[Derek]

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

[Sonl Sinha]

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

[Sonl Sinha]

Hi Derek,

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

Regards,
Chris

[Derek]

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

[Sonl Sinha]

Hi Derek,

Issue resolved. Kindly check and confirm.

Regards,
Chris

[Derek]

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?

[Sonl Sinha]

Hi Derek,

Issue resolved.

Regards,
Chris

[Derek]

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

[Sonl Sinha]

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

[Derek]

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

[Sonl Sinha]

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

[Author]

Posts