My Navigation Menu cuts in half and is hidden behind header images

trillionbillion · July 2016

Hi Guys
I know you have answered this question for other BeTheme users, but I can't find the discussion.
The navigation menu, splits in half as you see on an iPad and also on a 13" Macbook, which my client uses to check the progress of the site, so it's become a bit of a problem.
Looking for the best solution, removing padding, some css, smaller logo, Lowercase text??
whatever you recommend.
The logo's dimensions are: 300px × 106px (scaled to 255px × 90px)

See my images, thanks
website is: sunessentials.com.au

trillionbillion · July 2016

iPhone and other mobile devices are fine, the hamburger icon shows up.

Albert · July 2016

Hi,

the last menu items goes below on smaller devices because you simply got to many of them to put them all on smaller devices. What you need to do is activate responsive menu sooner than it is already now. You can do this with Responsive Menu Initial Width option under Theme options > Responsive section.

trillionbillion · July 2016

thanks I have increased the Responsive Width, to your recommended 1240px
So the hamburger menu comes in a lot sooner, great, trouble is it's lost in the image, by being transparent, is there some css to make the menu block a color?
Thanks
BTW, I have spoken to my client around the number of items and that is what she wants, so looking for a compromise, do you think reducing padding, Lowercase type, reducing the logo, would help?
What is the max. number items for the menu?

trillionbillion · July 2016

The image above, as you can see is from my iPad, the iPhone menu is white and easier to see and read, can this be applied to the iPad version?
thanks

Albert · July 2016

To change responsive menu background, please use:

#Top_bar #menu > ul { background: #FFF !important; }

But about the number of menu items, you can put as many you want but many items always affect the design.

trillionbillion · July 2016

Thank you so much for that edit, it was very much needed, my client has not been seeing what I see on my iMac monitor and a second monitor, she has a 12/13" Macbook and she was always seeing a truncated menu, all was ok, till her supplier said that it looked all over the place on an iPad, this will keep them all happy.
One final little edit, and I can see it in the code, just getting to it, the Plus Sign + can you tell me where to change it's colour, this will show up better also.
Once again many thanks

I can now rest this weekend.
This site is done!

Albert · July 2016

To change +/- icons color on responsive menu, please use an extra css:

#Top_bar #menu ul li.submenu .menu-toggle { color: #000 !important; }

trillionbillion · July 2016

Thanks, see how I go

trillionbillion · July 2016

Works great on Smartphone, but invisible on Tablet (iPad) and ideas?

trillionbillion · July 2016

Just a screenshot to show

trillionbillion · July 2016

Albert · July 2016

Please move pasted css on 1st line of Custom CSS section because you must did a mistake somewhere in css and that's why above code doesn't work.

trillionbillion · July 2016

perfect, many thanks again

Albert · July 2016

You are welcome!

My Navigation Menu cuts in half and is hidden behind header images

Comments