Return to previous page

Changing main's menu width and color

This topic has 12 replies, 3 voices, and was last updated 9 years, 1 months ago ago by Brian Johnson

tvboxas

Participant

April 8, 2015 at 18:10

Hello,
I tried to change width of main menu by adding (menu-full-width) to css-class. Nothing change. When I enter (menu-full-width menu-column3-4…) width changed by entered column width.
Also I tried to change color of menu by changing code of custom.css which is enabled by instruction. But no changes in menu color. Please help me.
Credentials is attached.

Please, contact administrator
for this information.

#55737 Copied

11 Answers

Robert Hall

Support staff

April 8, 2015 at 18:43

Hello,

For clarify. Do you want to get full width for submenu? http://prntscr.com/6r8vpb
Maybe provide screenshot for our better understanding and highlight what exactly you want.

Regards,
Robert Hall.

#55747 Copied

tvboxas

Participant

April 9, 2015 at 13:22

Yes, you are right. I want full width submenu and change color of menu and submenu.

#55961 Copied

Brian Johnson

Member

April 9, 2015 at 13:55

Do you want this only for single menu item or every first-level sub-menu should have 100% width?

With best regards
Brian Johnson

#55971 Copied

tvboxas

Participant

April 9, 2015 at 14:19

For second item of menu.
Screenshot is enclosed.

Please, contact administrator
for this information.

#55983 Copied
Brian Johnson

Member

April 9, 2015 at 16:13
Please put this code into the custom.css:
```
@media screen and (max-width: 1200px){
   .nav-sublist-dropdown {left:-00px !important; margin-top: 0!important;background:transparent!important;}
  .nav-sublist-dropdown .container{transform:translate(-45%,-10%);
  width:1215px!important;display:block!important;background:white!important;padding: 25px 30px 15px 30px!important;}}
  

@media screen and (min-width: 1200px){
   .nav-sublist-dropdown {left:-00px !important; margin-top: 0!important;background:transparent!important;}
  .nav-sublist-dropdown .container{transform:translate(-60%,-10%);
  width:1215px!important;display:block!important;background:white!important;padding: 25px 30px 15px 30px!important;}}
```
How to create custom.css you may watch here.

With best regards
Brian Johnson
#56031 Copied
tvboxas

Participant

April 9, 2015 at 16:17

Thank you.
The code also changes third item of main menu. I need change only second item to full width.
While it’s imposible as wrote in documentation – by adding [menu-full-width] to main menu item?
And how I can change color of menu?

#56033 Copied
Brian Johnson

Member

April 9, 2015 at 16:50
Please use this code(only for second element):
```
@media screen and (max-width: 1200px){
  .menu-item-20631 .nav-sublist-dropdown {left:-00px !important; margin-top: 0!important;background:transparent!important;}
 .menu-item-20631 .nav-sublist-dropdown .container{transform:translate(-45%,-10%);
  width:1215px!important;display:block!important;background:white!important;padding: 25px 30px 15px 30px!important;}}
  

@media screen and (min-width: 1200px){
   .menu-item-20631 .nav-sublist-dropdown {left:-00px !important; margin-top: 0!important;background:transparent!important;}
  .menu-item-20631 .nav-sublist-dropdown .container{transform:translate(-60%,-10%);
  width:1215px!important;display:block!important;background:white!important;padding: 25px 30px 15px 30px!important;}}
```
This element should be the second in menu. In case you want to change this position this code should be adjusted a bit.
Sorry default full-width option expands only to 5 column.

With best regards
Brian Johnson
#56045 Copied
tvboxas

Participant

April 9, 2015 at 17:01

Thank you, Brian.
How I can change color of menu and submenu?

#56053 Copied

Brian Johnson

Member

April 10, 2015 at 08:14

Please find these lines in previous code background:white!important value and change it to another(pink/yellow/red/green). You may use color picker to select preferable color and replace it.

With best regards
Brian Johnson

#56128 Copied

tvboxas

Participant

April 10, 2015 at 12:12

Thank you.

#56188 Copied

Brian Johnson

Member

April 10, 2015 at 12:14

You are welcome!

With best regards
Brian Johnson

#56189 Copied
Tagged: best selling, color, customization, main menu, themes, width, woocommerce
Viewing 12 results - 1 through 12 (of 12 total)