Home › Forums › Shudh theme support › Mobile Menu
- This topic has 15 replies, 2 voices, and was last updated 7 years ago by Derek.
-
AuthorPosts
-
November 16, 2017 at 4:45 pm #87605
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
ContentEssentially 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
November 17, 2017 at 6:05 am #87634Hi,
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,
ChrisNovember 17, 2017 at 10:56 am #87650Hi 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
November 17, 2017 at 11:27 am #87655Hi,
Can you send us the screenshot of your issues? Upload your screenshot on imgur.com and paste the share url here.
Regards,
ChrisNovember 18, 2017 at 11:44 am #87693Hi 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
November 21, 2017 at 6:31 am #87823Hi,
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,
ChrisNovember 21, 2017 at 10:30 am #87845Hi Derek,
This issue was resolved from our end. Kindly check and confirm.
Regards,
ChrisNovember 21, 2017 at 10:55 am #87852Hi 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
November 21, 2017 at 11:28 am #87864Hi Derek,
Issue resolved. Kindly check and confirm.
Regards,
ChrisNovember 21, 2017 at 11:34 am #87874It’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?
November 21, 2017 at 11:51 am #87887Hi Derek,
Issue resolved.
Regards,
ChrisNovember 21, 2017 at 11:57 am #87891Hi 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
November 21, 2017 at 12:08 pm #87901Hi 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,
ChrisNovember 21, 2017 at 12:25 pm #87914Menu 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
November 21, 2017 at 12:44 pm #87926Hi,
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 -
AuthorPosts
- You must be logged in to reply to this topic.