Fixing submenu to width website

Hi there,

I've almost finished my website, however, one thing is not working yet. It has to do with submenu's.

a. The submenu of the first menu item is not aligned to the main menu, it's positioned to the left. How can I make sure that the sub menu is aligned to the start of the blue background of the main menu (or #gkBg)?

b. The second menu item is set to 8-column. I want to make sure that the menu is equal to the width of the website (1400 pixels). What do I need to do? I've set column width to 175 pixels.

I see that style settings are automatically generated by a script?

Code: Select all

element.style {
    margin-left: -412.688px;
    height: 0px;
    width: 1400px;
    opacity: 0;
    left: auto;
    overflow: hidden;
    display: none;
}

Cheers

a) Solved. Add the code:

Code: Select all

.gkMainMenu .gkmenu > li div.childcontent {
    margin-left: 0px !important;
    max-width: 1400px !important;
}

The width of my website is 1400px.

b) I've added an additional class for the second main menu item.
Now I've added the following code, to make sure that the 8 columns are fitting to the width of 1400 pixels.

Code: Select all

.ownclass .childcontent .gkcol {
    width: 175px;
}

The only thing what's need to be done is adjustment of de margin-left to -170px to make the sub menu full width. How can I do this? Adding ownclass to .gkMainMenu .gkmenu > li div.childcontent is working for me.

Hi

I would need to see site after this changes. Please tell me the url, so I'll be able to check and tell what is needed.

Hi

I would need to see site after this changes. Please tell me the url, so I'll be able to check and tell what is needed.

I've send details in PM. Site is not public yet.

Hi

It's very problematic, because the margin is only counted from the width of the current menu item in level 0. The only thing I see which will not require recodding most of the menu script is to add a manual value for margin using code:

Code: Select all

#gkHeaderNav .gkMainMenu .gkmenu > li .childcontent.has-cols-8 {
    margin-left: -168px !important;
}


Hi

It's very problematic, because the margin is only counted from the width of the current menu item in level 0. The only thing I see which will not require recodding most of the menu script is to add a manual value for margin using code:

Code: Select all

#gkHeaderNav .gkMainMenu .gkmenu > li .childcontent.has-cols-8 {
    margin-left: -168px !important;
}


This helped me out!

Hi

It's not a perfect solution, but will have to do I'm afraid. Closing this thread now.