Collapsing Menu Categories into one menu button

munkytalk · Member · Apr 29, 2017 at 1:56 pm
Copy link

Add topic to favorites
Hi all – thanks in advance for me helping me out. Really new to this CSS coding, am learning as I go.

I am trying to make my menu categories. hide into one “menu bucket”. For example, if you use your mobile to see my site, you only get the “menu” button. Once you click on the menu button it will expand to the different menu categories. I believe the CSS coding detects the width of the page, and if it’s small enough it will collapse…I am trying to make it “fixed” so that it always shows just the menu button…all help is appreciated!

The site I need help with is https://munkytravels.com/

Thanks much!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · May 3, 2017 at 8:43 pm
Copy link
Hi there, I think I can see what you are wanting. When you are logged out of WordPress.com, there is a “close menu” button at the top of the toggled sidebar/menu after you click on the menu toggle. When you are logged into WordPress.com, that “close menu” button at the top is hidden by the admin bar. Add the following to your custom CSS to move things down so that that button shows.
```
.logged-in #toggle-sidebar {
	top: 32px !important;
}
#close-toggle-sidebar {
	color: #fff;
}
@media screen and (max-width: 782px) {
	.logged-in #toggle-sidebar {
		top: 45px !important;
	}
}
```
I’ve also turned that close menu text white for better visibility.
munkytalk · Member · May 4, 2017 at 5:57 am
Copy link
Hi – thanks for replying.

Apologizes as my initial post was not clear on my objectives. Let me try to explain better.

If you go into my website (browser version), you will see the different drop down menus (i.e. America Travels, Asia Pacific Travels etc). If you start making your browser smaller (i.e. physically making the browser smaller), you will begin to see these drop down menus will be “hidden” and be replaced with a menu button.

I would like to permanently have the menu button regardless of the size of the browser, in other words I would like to hide the drop down menus and have it replaced by with the menu button.

Thanks in advance for your help!!!
thesacredpath · Member · May 5, 2017 at 6:57 am
Copy link
Ah, thanks for the clarification. Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS and see what you think.
```
@media screen and (min-width: 993px) {
	#masthead .mobile-menu {
		display: inline-block !important;
	}
	#masthead .header-left-col .main-navigation {
		display: none;
	}
}
```
munkytalk · Member · May 5, 2017 at 8:42 am
Copy link
This is perfect. Thank you!
thesacredpath · Member · May 5, 2017 at 6:39 pm
Copy link
You are welcome.

No items found.