How to change menu column width ?

Hello,
I have 3 groups in my menu position. By default div with columns is 600 px width and each columns is 200 px width. Here is the code:

Code: Select all

<div class="childcontent-inner" style="width: 600px;">
   <div class="gkcol  first" style="width: 200px;">
      <ul class="gkmenu level1">
         <li class="first group biznes_uslugi">
.....
   <div class="gkcol " style="width: 200px;">
.....

   <div class="gkcol  last" style="width: 200px;">
.....
</div>


I need to customize columns width. Ex. first group 300px, second 150px, and thrid 150px.

I tried to use additional class in Menu Params (GavickPro) and set group width in my class but it does not work well. The class does not refer <div class="gkcol > where column width is set. Thus the "Extended" group does not move next groups. They overlap.

How to customize columns size ?

Hi,

Unfortunately there is no option to customize the specific column widths in the code or template options. If you want you can try to use complex CSS selectors with the !important:

FIRSTLY: please put some unique CSS class to the parent menu item i.e. "test"

Code: Select all

.test > .childcontent > .childcontent-inner > .gkcol:first-child {
width: 150px!important;
}


to select the second column please use the following selector:

Code: Select all

.test > .childcontent > .childcontent-inner > .gkcol:first-child + .gkcol {
width: 150px!important;
}


to select the third column use:

Code: Select all

.test > .childcontent > .childcontent-inner > .gkcol:first-child + .gkcol + .gkcol {
width: 150px!important;
}


etc.

Hi dziudek,

it works perfect with !important trick.

Thank you.

The "!important" is very important ( ) in this case, because content of the "style" attributes have a very high priority in the CSS.

I have the same problem, but i dont know where i most to put the CSS class?
is in the menu.css (templates\gk_game\css\menu\menu.css) ?

Hello,

You can the CSS code in the any CSS file at the end.

Sorry, but i dont undernstand

sorry but I did not understand
What I want is to customize the size of the columns in my menu.

like this:



Apparently, I have to add a custom class, but not where or how.
Please help me

You have wrote in a section for other template. In new templates you can specify the column size in the template settings under the menu tab, but if you need columns with different size then it will need a custom work which is beyond of our support.