Return to previous page

Floating menu layout issues on smaller devices

This topic has 37 replies, 7 voices, and was last updated 9 years ago ago by Eva Kemp

wordpressdev

Participant

January 22, 2015 at 08:41

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.

Please, contact administrator
for this information.

#36433 Copied

36 Answers

Stan Russell

Participant

January 22, 2015 at 08:53

Hello,

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

Regards,
Stan Russell.

#36436 Copied

wordpressdev

Participant

January 27, 2015 at 05:41

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

Eva Kemp

Support staff

January 27, 2015 at 09:14

Hello,

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

Thank you.
Regards,
Eva Kemp.

#37232 Copied

kamalkhanna12121

Participant

June 23, 2015 at 14:36

Please check when in small device Navigation menu overlapping

Please, contact administrator
for this information.

#71034 Copied Theme version: Legenda_v2.7.1
Eva Kemp

Support staff

June 23, 2015 at 18:11
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
Scuzzy76

Participant

October 29, 2015 at 16:17

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

Please, contact administrator
for this information.

#96798 Copied
Eva Kemp

Support staff

October 29, 2015 at 18:12
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
Scuzzy76

Participant

November 2, 2015 at 19:46

Thanks Eva, still same issue though. The menu doesn’t seem to be responsive on landscape view ipad 2 or on smaller browser viewings.

#97376 Copied Theme version: coffee

Eva Kemp

Support staff

November 2, 2015 at 20:35

Hello,

Could you please show a screenshot of the issue?

Thank you.

Regards,
Eva Kemp.

#97393 Copied

Scuzzy76

Participant

November 2, 2015 at 21:06

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

#97397 Copied

Scuzzy76

Participant

November 2, 2015 at 21:09

#97398 Copied

Scuzzy76

Participant

November 2, 2015 at 21:15

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
Jack Richardson

Support staff

November 3, 2015 at 07:52
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
Scuzzy76

Participant

November 3, 2015 at 09:40

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

Eva Kemp

Support staff

November 3, 2015 at 10:23

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

Scuzzy76

Participant

November 3, 2015 at 10:35

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

Robert Hall

Support staff

November 3, 2015 at 10:49

Hello @Scuzzy76,

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

Regards,
Robert Hall.

#97486 Copied

Scuzzy76

Participant

November 3, 2015 at 10:50

Sure. info below.

Please, contact administrator
for this information.

#97487 Copied

Robert Hall

Support staff

November 3, 2015 at 11:33

Your credentials aren’t correct.

Regards,
Robert Hall.

#97506 Copied

Scuzzy76

Participant

November 3, 2015 at 11:40

Yep. just checked and logged in fine using:

#97508 Copied

Scuzzy76

Participant

November 3, 2015 at 11:42

see below.

Please, contact administrator
for this information.

#97509 Copied
Eva Kemp

Support staff

November 3, 2015 at 16:00
Hello,

Please edit the code in Custom CSS for desktop to:
```
.header-wrapper .menu > li > a {
 font-size: 11px;
}
```
Regards,
Eva Kemp.
#97570 Copied
Scuzzy76

Participant

November 4, 2015 at 15:52

this has now broken my header on mobile tablets.:( Both portrait and landscape not working now???
Sue

#97794 Copied

Scuzzy76

Participant

November 4, 2015 at 15:55

Also created an issue on desktop logo disappeared! URGENT HELP NEEDED

#97797 Copied

Scuzzy76

Participant

November 4, 2015 at 16:00

Logo fixed! Issue with menu splitting still there!? 🙁

#97802 Copied

Scuzzy76

Participant

November 4, 2015 at 16:12

Your suggested fix has messed up lots of image links on the site@!

#97808 Copied

Eva Kemp

Support staff

November 5, 2015 at 09:28

Hello,

Now we can’t access your wp-admin panel.
Please check the credentials and show screenshot what exactly you want to achieve.

Regards,
Eva Kemp.

#97920 Copied

Scuzzy76

Participant

November 5, 2015 at 10:04

Hi Eva,
thanks for your reply, not sure why you had trouble loggin in. Credentials the same.

The issue is the same as previous image above.
On desktop it works and reverts the the responvie menu but on i-pad landscape view CONTACT US drops to the line below.

See image

Appreciate your help on this. 🙂
Sue

#97930 Copied

Robert Hall

Support staff

November 5, 2015 at 10:27

Hello,

Sorry, but we still get ‘ERROR: Incorrect username or password’.
Please reset password and provide us again.

Regards,
Robert Hall.

#97932 Copied
Tagged: devices, floating, issues, layout, menu, smaller, templates, woocommerce, wordpress
1 2

Viewing 30 results - 1 through 30 (of 37 total)