Sub Menu Background

[rbnbm]

Hi,

first of all: there is a very nice ton of tips in this forum to help with a lot things - great!

One thing I did not find when trying to style a submenu: how can I expand the white background to the left so that the text of the submenu stays in line with the top-menu item, but has some padding? Every CSS change I tried moves the text, but not the background.

I have been using the 'latest version' from this discussion: http://laythemeforum.com:4567/topic/913/drop-down-menu/

Thanks!

[mariusjopen]

Dear @rbnbm
can you provide a rough sketch to be more clear? :-)

Best!

Marius

[rbnbm]

Hi!

Sorry for being unclear, is the picture helpful?

I mean the space on the left of the sub menu points.

Thanks!

[mariusjopen]

Dear @rbnbm
if you post a link if could help you better. Until now I cán only say: Dive into the CSS. Use the !important tag. And apply a width: 100vw

Hope that helps!

Best!

Marius

[rbnbm]

Hey,

Sorry, forgot that – here is the link:
http://ah-fotografie.de.w019239e.kasserver.com/site

Problem is that I cannot find the selector for the background.
Thanks a lot!

[mariusjopen]

Dear @rbnbm

does that help?

.sub-menu {
    width: 100vw !important;
}

Best!

Marius

[rbnbm]

Hi @mariusjopen

unfortunately not – nothing is happening...
Any other ideas?

Thanks!

[mariusjopen]

Dear  @rbnbm
for me it did. It extended the background of the navigation to the right border of the screen.

Best!

Marius

[rbnbm]

Hi @mariusjopen ,

Sorry, you are right! I failed to explain – there is white space on the right side, but I would like to have some space on the LEFT side of the items (letters) in the submenu. Possible?

[mariusjopen]

Dear @rbnbm
have a look here:

.sub-menu {
    padding-left: 15px !important;
}

And here. You can use the :hover in the Chrome Inspector:

Best!

Marius

[rbnbm]

Dear @mariusjopen ,

Thanks, but I already got that to work, I am looking for a code so that it looks like this:

Possible? Thanks again!

[mariusjopen]

Dear @rbnbm
but that was the solution I provided, no?
You can also play around with the code I gave you.

Best!

Marius

[rbnbm]

Dear @mariusjopen ,

Sorry, but your code delivers the following:

The text is indented, not aligned with the item of the menu. Minor, I know, but still... I already tried different things but couldn't make it work. If it's not possble - okay. (I send you the login data via chat regarding the other matter, if you want to take a look....)

Thanks again, your help is much appreciated!!!

[mariusjopen]

Dear @rbnbm
try this one:

.primary .sub-menu {
    display: none;
    position: absolute;
    background-color: white;
    border: 0px solid grey;
    padding-top: 10px;
    padding-left: 20px;
    margin-left: -20px !important;
    padding-bottom: 20px;
}

Best!

Marius

[rbnbm]

Hi @mariusjopen ,

Sorry, does not work, now all Sub Items are in line:

Nevermind, let's leave it at that. I'll file this under "not possible".

Any news on why the search does not work (my chat message)? Did you get my login data?

Thanks
rbnbm

[mariusjopen]

Dear @rbnbm
try this then. I think this is what you want:

.primary .sub-menu {
    display: none;
    position: absolute;
    background-color: white;
    border: 0px solid grey;
    padding: 10px 0px 10px 10px;
    width: 100vw;
}

I wrote Armin about the search and he will reply soon I assume.

Best!

Marius

[rbnbm]

dear @mariusjopen ,

Thanks, but it does not work ; -)

Text is indented again.

As I see it, the padding indents the text to the right. A negative value puts it back in place, but then there is no white space to the left.

As I said, not perfect, but also not a big deal. I'm just wondering whether it is possible at all (I also tried different negative values, to no effect).

Just to make sure, here is all of the code I am using right now for the menu:

.primary .sub-menu {
display: none;
position: absolute;
background-color: white;
border: 0px solid grey;
padding: 10px 0px 10px 10px;
}
.primary .sub-menu li {
display: block;
}
.menu-item:hover .sub-menu{
display: block;
}

Looking forward to the search thing...

Best,
RBNBM