Menu Bar vanishes on smaller windows & mobile

mommylemur
(@mommylemur)

10 years, 7 months ago

I saw an earlier post on the forum with a very similar title, however the fix offered there does not work for me, so hopefully starting a new topic is indeed the proper way to request assistance.

The issue I am having is that when the window shrinks below about 956 pixels across (on the desktop) or at any resolution or orientation on the mobile app, the entire menu bar across the top of the page vanishes, and is replaced with a menu button instead. The person I am designing this site for is 100% unhappy with this — to the point that it’s a deal-breaker if he doesn’t have a mobile menu instead of a menu button.

The test site is at http://www.naebunny.net/testing/

I have tried everything I can think of, and nothing I can find in the forums is helping so … any advice or suggestions would be awesome. Thanks so much!

I should probably add — I have tried removing the social networking icons from the header menu, which didn’t make any difference. I have also tried only using the 4 “most crucial” menu items and putting the rest of the links to pages on the sidebar instead. The menu bar STILL disappears when you size down the window.

Thanks, again! 🙂

Viewing 6 replies - 1 through 6 (of 6 total)

Jesin A
(@jesin)

10 years, 7 months ago

Your link shows a 403 forbidden error.

Thread Starter mommylemur
(@mommylemur)

10 years, 7 months ago

Hmm … I just clicked it and it’s working fine … tried from outside the domain too, to be sure I wasn’t nuts. (Well, okay, not nuts about THAT at least.)

Not sure why you can’t get there, but thanks for trying at least? 🙁

Thread Starter mommylemur
(@mommylemur)

10 years, 7 months ago

Jesin, we found the problem — my husband had the domain behind a country based blacklist because of hack attempts on the test server, and that’s why you were getting the 403 error. So sorry. He’s removed the blacklist now.
Jesin A
(@jesin)

10 years, 7 months ago
the domain behind a country based blacklist

I though so 🙂 I think some parts of Asia were blocked as I tried accessing it from India and a Hong Kong proxy.

The mobile menu works based on CSS media queries

Looking into /testing/wp-content/themes/customizr/inc/css/black.css line 8675
```
.navbar .btn-navbar {
  display: block;
}
```
this code is placed inside
```
@media (max-width: 979px) {
}
```
To disable it you need to override it by adding the following to the style.css file of your child theme
```
@media (max-width: 979px) {
 .navbar .btn-navbar {
   display: none;
 }
}
```
Similarly to prevent the normal menu bar from disappearing focus on all .navbar code inside

@media (max-width: 979px) { }

You’ll have to concentrate on overriding float: none , display: none and position:

Use the firebug plugin for firefox to make your job easier.

Here are some resources

http://www.w3schools.com/css
http://css-tricks.com/css-media-queries/
Thread Starter mommylemur
(@mommylemur)

10 years, 7 months ago

No clue if this is going to work yet or not, I just got back to the computer for the day, but I am going to give it a go and I’ll let you know!

Thank you SO MUCH for the input.

samcourt13
(@samcourt13)

10 years, 7 months ago

This is helpful for me as well. Can’t wait to test it out. Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Menu Bar vanishes on smaller windows & mobile’ is closed to new replies.

Tags