Vertical alignment of expanded hamburger menu?

Hi guys,

I'm new to BSS, and now for two days playing around with it. I've got a navbar fixed to top, which is doing fine on desktop. When opening the site/page on my iPhone (or simulated on desktop), the collapsed "hambuger menu" is showing up well. But when i tap or click on it, the menu items seem to be vertical aligned centered, neither I can't see the first menu item, nor the "hamburger" icon.


I've googled for this a couple of hours now, but didn't find any explanation or solution. Do you have any idea where's the bug? Btw, I'm not unfamiliar with CSS ;-)

Every hint appreciated, thanks a lot!

Learn CSS, you will need it if you want to use this app effectively. You will not be able to do much with the styling of things (which is what you're attempting) without the knowledge to do so, this isn't a 100% drag and drop no code app.

Hi Jo,

i wrote "I'm NOT UNfamiliar with CSS". ;-) I made already two smaller websites under Bootstrap, without Studio, but coding.

I just don't know where to start with CSS, at "Navbar" or "Navbar collapse", and which style parameters to add resp. edit.

Ah I see now thanks for clarifying that, I missed it sorry lol.

The best way I can tell you to do that is to use the app itself to verify what the classes are for specific areas. In other words, if you're trying to change something about the Hamburger menu itself in coloring etc., resize the viewport in BSS to the smaller screen-size that has that Hamburger menu visible and click on it. Now you will see all the classes that go with that part of the element show up in the Styles window, same for all other areas of the nav. It's actually a pretty great way to get familiar with areas we don't work with a lot or are just not familiar with.

If it's locked, just make a copy of it (use the dots to the right of each class/id to get the menu for duplicating classes) and add it to your custom css file. Now you can edit all the attributes of the class that was locked.

Anyways I digress haha. Use the Styles window as one of your best tools for finding out what is connected to what in your CSS. Best way to seek out what needs to be changed. Don't get discouraged if you change something and nothing happens, watch for media queries which will many times stump me lol, and sometimes what I change just doesn't seem to do anything so I just go to the next one that has that color or style I'm trying to change. Works pretty slick for getting to know the nav areas.

Hope that helps!