Return to previous page

Topic: Floating menu layout issues on smaller devices

Tagged: menu floating mobile layout

wordpressdev

Participant

January 22, 2015 8:41 am

When viewing this site at mobile device sizes, the logo, floating menu, and mobile menu all conflict, laying over each other. Seems that the whole header layout has issues with smaller sizes.

Content is visible for topic creator and
support staff only.

#36433 copied to clipboard

Like

Stan Russell

Participant

January 22, 2015 8:53 am

Hello,

please provide us with admin credentials for your site in private content.

Regards,
Stan Russell.

#36436 copied to clipboard

Like

wordpressdev

Participant

January 27, 2015 5:41 am

Hi, have now undertaken a number of manual fixes using CSS and media statements to fix the header my site which is using the Royal theme (with header 5) – the theme has/had a number of responseive layout issues despite being previously unaltered. Issues I have done for my site include:
– fixing sticky header and mobile menu overlapping each other in mobile views
– sticky header not fitting with design at all in mobile layout
– logo overlapping other items, not centering for mobile
– basket icon being slightly obscured on right under 480px

So in case you got my credentials, I have revoked the username and login info, in case you were still interesting in logging into my theme yourselves.

Thanks.

#37198 copied to clipboard

Like

Eva Kemp

Support staff

January 27, 2015 9:14 am

Hello,

Yes, please provide us with wp-admin panel credentials.

Thank you.
Regards,
Eva Kemp.

#37232 copied to clipboard

Like

kamalkhanna12121

Participant

June 23, 2015 2:36 pm

Please check when in small device Navigation menu overlapping
Site URL: hidden
Theme version: Legenda_v2.7.1

Content is visible for topic creator and
support staff only.

#71034 copied to clipboard

Like
Eva Kemp

Support staff

June 23, 2015 6:11 pm
Hello,

Please add this code in custom.css file:

@media (max-width: 979px) and (min-width: 768px){ .shopping-cart-widget { width: 30% !important; } .header .logo { float: right !important; }}

How to create custom.css you can watch in this tutorial.

After that check your site on mobile devices.

Regards,
Eva Kemp.
#71100 copied to clipboard

Like
Scuzzy76

Participant

October 29, 2015 4:17 pm

HI EVA,
I’M also seeing issues on the main navigation bar. It is not automatically responding on smaller screens.
This happens on some laptops, on ipad 2 landscape view and a few other devices. It needs to recognise the responsive option of the menu for this view.
Can you help?
thanks
Sue

Content is visible for topic creator and
support staff only.

#96798 copied to clipboard

Like
Eva Kemp

Support staff

October 29, 2015 6:12 pm
Hello @scuzzy76,

Please add this code in Theme Options > Custom CSS > Custom CSS for mobile:

.page-heading-slider { display: flex; }

Regards,
Eva Kemp.
#96839 copied to clipboard

Like
Scuzzy76

Participant

November 2, 2015 7:46 pm

Thanks Eva, still same issue though. The menu doesn’t seem to be responsive on landscape view ipad 2 or on smaller browser viewings.
Site URL: hidden
Theme version: coffee

#97376 copied to clipboard

Like

Eva Kemp

Support staff

November 2, 2015 8:35 pm

Hello,

Could you please show a screenshot of the issue?

Thank you.

Regards,
Eva Kemp.

#97393 copied to clipboard

Like

Scuzzy76

Participant

November 2, 2015 9:06 pm

Happy to Eva, where is the option to upload a screengrab?
Sue

#97397 copied to clipboard

Like

Scuzzy76

Participant

November 2, 2015 9:09 pm

#97398 copied to clipboard

Like

Scuzzy76

Participant

November 2, 2015 9:15 pm

It seems to be as soon as the Cart icon top right disappears then the CONTACT on the menu is shifted down a line?

#97401 copied to clipboard

Like
Jack Richardson

Support staff

November 3, 2015 7:52 am
Hello,

Do you want to display menu in one line?
If so please add the code in Theme Options > Custom CSS > Custom CSS for tablet and Custom CSS for mobile landscape:

.header-wrapper .menu > li > a { font-size: 12px; }

Best regards,
Jack Richardson.
#97442 copied to clipboard

Like
Scuzzy76

Participant

November 3, 2015 9:40 am

Thanks Jack. Still not working. It hasnt changed at all.
What I need it to do is to force the mobile menu, instead of dropping contact us to the line below. It seems to do it on mobile, and desktop if the browser window or resolution is low/small.

If the browser is called down again it works and defaults to the drop down menu.

Thanks
Sue

#97466 copied to clipboard

Like

Eva Kemp

Support staff

November 3, 2015 10:23 am

Hello,

Please try to add the previous code to Theme Options > Custom CSS > Custom CSS for desktop and check site on mobile.

Regards,
Eva Kemp.

#97475 copied to clipboard

Like

Scuzzy76

Participant

November 3, 2015 10:35 am

That’s done the trick on desktop. It now reverts to the mobile menu. But the issue is still there on tablet landscape. Contact us drops down but now aligns centre?
thanks

#97484 copied to clipboard

Like

Robert Hall

Support staff

November 3, 2015 10:49 am

Hello @scuzzy76,

Please provide us with wp-admin access in Private Content.

Regards,
Robert Hall.

#97486 copied to clipboard

Like

Scuzzy76

Participant

November 3, 2015 10:50 am

Sure. info below.

Content is visible for topic creator and
support staff only.

#97487 copied to clipboard

Like

Robert Hall

Support staff

November 3, 2015 11:33 am

Your credentials aren’t correct.

Regards,
Robert Hall.

#97506 copied to clipboard

Like