Resizing website to different resolution

[sphereteam]

Hi there, i have 2 issues i need help with:

This is the website: http://www.sphereco.co/spheredev2/

1. when i resized my screen to 1024 pixels the menu wrapped into 2 lines. See screenshot attached. The menu has to be one 1 line.
2. Please open up homepage in your mobile phone. Scroll all the way down, then try moving with your fingers to the left. Site is not steadily fixed in mobile phones. Can you tell what the issue is?

thank you.

[Veena]

1.Pls try the below custom CSS in themeoptions –

@media only screen and (max-width: 1024px){
#mega-menu-primary > li.mega-menu-item {
    margin: 0 30px 0 0;
}}

2.

@media only screen and (max-width: 767px){
#container {
    overflow-x: hidden;
}}

[sphereteam]

hi, thank you for quick reply.

unfortunately the 1st did not work.
any other way i can try?

@media only screen and (max-width: 1024px){
#mega-menu-primary > li.mega-menu-item {
margin: 0 30px 0 0;
}}

however the second one worked great! Thank you!

[Veena]

Pls try this –

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
    margin: 0 30px 0 0 !important;
}

[sphereteam]

hi, thank you for quick reply. Here are the pictures before and after css code.
is it possible to have the menu move the left and not being in center?

[Veena]

Can you pls check whether if you can change it in the plugin settings?

[Author]

Posts