Always display full nav menu bar – disable mobile nav box (Custom Community)

[phifer]

I’d like to disable the mobile navigation togge / menu box that automatically pops up in mobile view (and tablet portrait), so that the big long nav bar is shown. (My client wants it this way.)
Theme is Custom Community.
Site is https://www.kurtayacademics.com.

I’ve edited the CSS stylesheet a few times based upon threads I’ve found here. This one seemed really helpful.

Although I know those solutions I found are for different themes, I still thought I could adapt the main idea.

I’ve tried (unsuccessfully)
– adding this code to the Navigation section
#simple-menu{display:none!important;}ple-menu{display:none!important;}
– changing the code section
@media screen and (min-width:
to a min width of 250px
– then tried a max width of 250px, just to see if anything would change. nope.
– can’t find a #masthead (see the forum post linked to above)

I also looked for special plugins – nothing available.

Any help or ideas?
I’m using the top/primary/first/main navigation menu bar, btw, not the secondary. There’s a bug with that.

Cheers!

[Johnna Armstrong]

Hi,

You might try tweaking the CSS for these two styles:

@media (min-width: 768px)
.navbar-toggle {
    display: none;
}

.collapse {
    display: none;
    visibility: hidden;
}

Maybe set the min-width to 10px in the first, and comment out the visibility: hidden in the second. I don’t think it’s a great idea, and it sounds like maybe you don’t either, but maybe if you can show it to your client, you can change his/her mind… ??

Johnna

[phifer]

Thanks for your reply, Johnna!

I changed the min width to 10
‘
@media (min-width: 10px) {
.navbar-toggle {
display: none;
}
.collapse {
display: none;
visibility: hidden;
}
‘
from there it went on to describe alignment and padding, so I snuck in the .collapse bit right after.

I didn’t delete anything else (just in case I can convince my client that the display is clearner with the built-in nav)… and alas, nothing happened when the file updated. Should I have deleted the other bits about mobile nav behaviour when the min-width applies? I thought the 10px and “display none” would have done the trick.

PS) I’ve also found this info for adjusting the Bootstrap settings; just can’t seem to find where to put the code in the CSS
https://getbootstrap.com/css/#grid

[Johnna Armstrong]

Hi,

Instead of keeping the .collapse CSS as it is, you want to comment it out, like this:

.collapse {
/*display: none;
visibility: hidden;*/
}

The idea is for the regular menu not to collapse on smaller viewports.

Johnna

[phifer]

Thank you again very much for your help, Johnna!

[essamy]

Hello,
I have the Twenty twelve theme and I just need to hide “Menu” button in mobile mode and show normal desktop menu since it contains only one element, How I can do this please?

• This reply was modified 7 years, 10 months ago by essamy.

[Johnna Armstrong]

It’s hard to say without being able to look at your site, but assuming your site code is exactly like the original Twenty Twelve, you could add some custom CSS to hide the mobile menu button:

.menu-toggle {
    display: none;
    visibility: hidden;
}

Johnna

[essamy]

Thank you Johnna..
With your code: the mobile menu is hide but the disktop menu not appears!
Now the mobile view has not any menu.
How I can do??

[Johnna Armstrong]

Hi @essamy,

Did you update the CSS inside the @media query for mobile devices? Look for something like this:

@media screen and (min-width: 600px)

Again, hint hint, it’s much easier to help if you can provide a link to your site. ??

Johnna