Menu breaks in mobile view

Sparkling
1

I’m not sure what’s happening, but my menu seems to break when you get down to a mobile size. When the menu toggle is selected, “HOME” will appear under the header, but the other menu items do not appear. It does not do an accordion fold-out like on the demo.

The header background also does not expand down, as in the demo, when tablet-sized. Although I’m more concerned about it not working in mobile.

www.cheerstoveganwine.com

Any help appreciated.

2

Hi Ksimmons,

We’ve visited your blog and figured out what’s wrong. You’ve specified a navigation bar height of 110px in style.css line no. 798.

Edit style.css inside the sparkling folder and search for the keyword “.navbar.navbar-default”

In your current style sheet, the navigation bar code looks like the one below:

.navbar.navbar-default {
  background-color: #363636;
  font-family: 'Open Sans', serif;
  margin-bottom: 0;
  font-weight: 500;

  height:110px;

}

You need to remove the height:110px; entry from the code and it should fix the view on mobile as well as tablet.

New code should look like:

.navbar.navbar-default {
  background-color: #363636;
  font-family: 'Open Sans', serif;
  margin-bottom: 0;
  font-weight: 500;
}

Remove the height: 110px; entry, save the file, exit the editor and refresh the website to see the changes.

In case any further assistance is required, please let us know.

3

Brilliant, thanks. That worked.

4

Hi Amit,

I have removed the `height: 110px;
But it still doesnt work on mobile view. :frowning:

My web: paperchecker.org

Could you please help me to solve this problem?

Thank you in advance.

5

Hi Greatgreg,

Please copy the following code and paste it into custom styles in theme options [Appearance > Theme Options > Other] (It can also be included at the end of the stylesheet if you’re using a child theme):

@media(max-width:767px) {
  #content {
  margin-top:12px !important;
}

Let us know if this solves the problem.

6

Hi Amit,
I’m having the exact same problem.
I never had the height:110px; to remove in the first place, but I tried copying and pasting the code you supplied in your last message and got nothing :frowning:

7

Hi Amit,

It works on iPad mini! :slight_smile:
But, the submenu won’t go back to the previous position automatically instead.

I hope you could give me some suggestion.
Thank you.

Best wishes,
Greg