Main menu showing down center of website on mobile and tablet – PLEASE HELP!

Hi there,

I am experiencing a few issues with the theme – particularly on mobile/tablet.

The first and most important to fix issue is that the main menu runs down the center of the site on mobile and tablet – can I just code that out in css? Can you provide me with guidance/a fix for this?

Second – the slider revolution is not scaling properly on the front page – everything is misaligned and large – a solution for this?

Thank you for a quick reply – I am on a deadline.

Thanks again

I was actually able to fix the menu by coding it out in CSS (not ideal)

But am still having the issue with the buttons not scaling on Slider Rev AND now that the menu is gone from the center of the page, I am realizing in the shop page on mobile and tablet that the categories drop down is not working.

Please advise, thank you.

Hello,

Thank you for contacting us.

Here is a video tutorial that should help you to make your revolution slider responsive https://www.youtube.com/watch?v=iyuxFo-WBiU

We just checked your shop page and categories work just fine for us https://gyazo.com/4ff34ea6eebf4372b941f4b389abb236

And please explain what do you mean be “menu is gone from the center of the page”? It seems that you made some CSS changes. Try to add this code snippet also

.basel-header-overlap .main-header .main-nav .menu>li>a {
    height:35px;
    line-height:35px;
}
.main-header .right-column,
.main-header .site-logo {
    width:20%;
}
.main-header .main-nav {
    width:60%;
}

Regards

Hi there – thank you so much for the quick reply!

The categories are not working on MOBILE or TABLET – the drop down does not work.

Also – is there a way to edit the large and small header size?

Thank you!

What do you mean by edit the large and small header size?

We just visited your web-site from mobile and see that categories dropdown works well. What device do you use?

In the theme, the page heading is available in 2 sizes – Large and Small. Is there a way to specify the height so that it doesn’t overlap with titles, etc in the heading?

Categories is now working.

Also – logo size in mobile? I’ve tried to edit it to no avail…

Thank you!

You can change page heading size by adding this custom CSS

.basel-header-overlap .title-size-large {
    padding: 130px 0;
}

Try to change logo size by adding this code for mobile devices in Custom CSS area

.main-header .site-logo img {
    max-height: 50px;
    width: auto;
}

Regards

Okay – everything is fixed! One last issue –

When viewing the theme/website in SAFARI, the descriptions on products do not come up. It works on Safari on an iPhone, just not on a computer – please help.

Thank you!

We have fixed safari issue in the last update (you can check how it works on our demo). So please update Basel to the latest version 2.1

[Author]

Posts