Drop downs of main menu goes into description text of 1st menu items « Support Forum | Kriesi.at

Support Forum » Corona

Drop downs of main menu goes into description text of 1st menu items

15 posts from 3 voices

Started 1 year ago by colorit2
Latest reply from Devin
This topic is not resolved

Tags:

colorit2
Member

Hi,

what can I do so that the description of the main menu items (in my example the word "genießen") does not go into the submenu item "Zoomtest":

http://i49.tinypic.com/wik4qp.jpg

The drop downs should be above all, like they are above the breadcrumbs for example.

Thanks.

Posted 1 year ago #

Dude
Dude

Hey!

Please try to add following code to css/custom.css:

#top .main_menu .menu .sub-menu li, #top .main_menu .menu .sub-menu li a{
    background: #FFFFFF;
    z-index: 20;
}

Regards,
Peter

Posted 1 year ago #

colorit2
Member

thanks, but unfortunately it has no effect at all:

http://tinyurl.com/7vtuj3j

--> here: main navigation point at the right "LOUNGE"

Posted 1 year ago #
colorit2
Member

no one an idea?

Posted 1 year ago #
colorit2
Member

I have tried now several z-index, making a white background, nothing helps :-(

Please see my site here:
http://tinyurl.com/7vtuj3j

--> here: main navigation point at the right "LOUNGE"

Posted 1 year ago #
colorit2
Member

bump

Posted 1 year ago #
Devin
Moderator
Hi colorit2,

Just a quick fyi, bumping posts currently sends them to the back of our queue as we answer from oldest posted message to most recent.

In your main style.css, look for:
```
#top .main_menu .menu a{
```
then change the max-width attribute to:
```
max-width: 126px;
```
Or, just try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
```
#top .main_menu .menu a{
max-width: 126px !important;
}
```
Regards,

Devin
Posted 1 year ago #
colorit2
Member

thanks, Devin, sorry, I haven't known this.

Unfortunately, that isn't that, what I mean: I don't want to have the description of the main menu items in one line - I would like to keep them in two lines as in the original theme.

(Your code put them in one line and has the effect, that now is a white line at the bottom of the drop downs. But whatever ... my question was another.)

The drop downs of the main menu are going into the writing of these main menu descriptions!

http://i49.tinypic.com/wik4qp.jpg

This is the only thing, I would like to correct, is that the drop downs don't go into the text of the main menu items by keeping the descriptions in two lines:

Isn't that possible in any way?
Thanks.

Posted 1 year ago #
Devin
Moderator
Hey colorit2,

I'm not quite sure if this is what you are looking for but give this a try:
```
#top .main_menu .menu ul {
padding-top: 45px;
}
```
Regards,

Devin
Posted 1 year ago #
colorit2
Member

thanks, Devin, but I mean something like the z-index, I'm not sure, because I'm not so familiar with CSS.

Here is a screenshot of what I mean:

http://i45.tinypic.com/2h88jzd.jpg

the first image on top is how it is at the moment; the image below is retouched with PS - and this is what I would like to have.

The drop-downs should go OVER the descriptions of the main menu items, respectively the main menu descriptions should be BEHIND the drop-downs - as the breadcrumbs for example correctly are!

Every other things, like the positions of the menu items should be as they are.

Posted 1 year ago #
Devin
Moderator
Oh I see now. Peter's original fix should work then. Currently the z-index for the sub menus is set at 2, it should be above 20 to overlap the main menu items.

So try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
```
#top .main_menu .menu ul {
z-index: 30 !important;
}
```
Posted 1 year ago #
colorit2
Member

Thanks, Devin, that works now fine for the last menu item "LOUNGE", but not for the children and grandchildren of the other main menu items.

Can't understand, why these items don't behave the same:

http://i50.tinypic.com/35jdxk2.jpg

and

http://i47.tinypic.com/e7jocm.jpg

I have now this code in my custom.css:

#top .main_menu .menu .sub-menu li, #top .main_menu .menu .sub-menu li a{ background: #FFFFFF; z-index: 30; } #top .main_menu .menu ul { z-index: 40 !important; }

Do you have an idea how to fix this, too?

Site: http://tinyurl.com/7vtuj3j

Thanks a lot!

Posted 1 year ago #
Devin
Moderator

Hello colorit2,

At this point I'm not actually sure how to fix that. The items all seem to have the correct z values to assert proper hierarchy so I can't see why they would behave like they are.

The only somewhat fix I can see would be to keep the sub menu text in a single line so that all the dropdowns were below the text and you wouldn't need to worry about overlap.

Regards,

Devin

Posted 1 year ago #
colorit2
Member

ok, so I've now set all descriptions to my necessary 2 lines.
The weird thing is, that it does not overlap as long as it is its own child (dropdown), but it overlaps its neighbour:

Screenshot: http://tinyurl.com/cv5t243

Live at site: http://tinyurl.com/7vtuj3j

Perhaps this makes it more clear to find out a fix?

Posted 1 year ago #
Devin
Moderator
I think that this might end up being a good resolution for you. Now that they are all the same height, we can just move the menu down a bit and not worry about any z issues at all.

Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
```
#top .main_menu .menu ul {
padding-top: 44px;
}
```
Posted 1 year ago #