CSS help: dropdowns [Solved]

Pearl (played by Sanne)

So I churned out this template overnight with relative ease. The only issue I'm having is with the dropdown menu for page links. The dropdown menu refuses to align properly and stay put where it needs to be. Before I work on a responsive design I want to have this fixed first.

I've been going over other templates' codes repeatedly, copying all the dropdown code as-is, but none of it works. I'm probably missing something obvious, but I've been going cross-eyed over this template and need some outside input! If anyone knows how to fix it please let me know.

Kim Site Admin

Change

Code:

#pagetabs ul, #pagetabs li {display: inline-block;}

Code:

#pagetabs >  ul, #pagetabs > li {display: inline-block;}

That'll get you a long way toward where you need to go.

Pearl (played by Sanne) Topic Starter

Thank you!! That worked like a charm.

Pearl (played by Sanne) Topic Starter

I'm having another issue with likely a simple fix that I can't figure out lol.

I need to format the dropdown menus, but now for the responsive version. I'm like 80% there, but when the dropdowns open, they don't push the rest of the divs down to make room for the nav list. I'm not entirely sure why or how to fix that.

aulelei

Do you mean the dropdown tabs overlap?

Pearl (played by Sanne) Topic Starter

light wrote:

Do you mean the dropdown tabs overlap?

Yes, but only for the mobile version.

Pearl (played by Sanne) Topic Starter

Okay, Kim helped me out with this too, so I'll post what we did in case anyone else struggles with this. The issue was that on mobile, the toolbar and menu dropdowns fell behind the other content and didn't push any of it down. I initially wanted to fix it up as having the menu push down the other content, but I ended up making the menu overlay on top of the content because it looked nice anyway. Then I styled it.

The changes I made were:

Code:

@media screen and (max-width: 900px)
.mobilesupportenabled #toolbar > ul.open, .mobilesupportenabled #pagetabs.open {
    display: block;
}

I added a position:relative; in here.

Code:

@media screen and (max-width: 900px)
.mobilesupportenabled #toolbar ul li, .mobilesupportenabled #pagetabs li {

To this section, I added margin:0; padding:0; text-align:left;

Code:

.mobilesupportenabled span.mobiledropdowntoggle {
    width: 16px;
    height: 16px;
    float: right;
    clear: both;
}

This was new code amended to that section.

Code:

.mobilesupportenabled #toolbar-dropdown-nav.open-dropdown {
	display: block; 
		position:relative;
		margin: 0;
		padding: 0;
	}

I had to add this class/ID combo to this code in order to make the + in the Toolbar under 'Home' open when hovered over.

I hope that if anyone else runs into issues with dropdowns, this will be helpful to get it sorted.

Thanks again Kim for all the help!

You are on: Forums » Art & Creativity » CSS help: dropdowns [Solved]

Moderators: Mina, Keke, Cass, Claine, Sanne, Dragonfire, Ilmarinen, Darth_Angelus