Title: Full Width Menu
Last modified: August 30, 2016

---

# Full Width Menu

 *  [dhochberg69](https://wordpress.org/support/users/dhochberg69/)
 * (@dhochberg69)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/full-width-menu-2/)
 * HI how can i make my menu full width?
    my site is [http://www.babyexpos.co.nz](http://www.babyexpos.co.nz)
 * my custom CSS is
 * #soliloquy-container-199 { text-align: center; margin: auto; }
    .sf-menu > li{
   width: 14.26%; } .wpb_tour_tabs_wrapper .wpb_tabs_nav li{ background-color: #
   d0d0d0!important; border-radius: 10px 10px 0 0; } .wpb_tour_tabs_wrapper .wpb_tabs_nav
   li a{ color: #21a8d1; font-weight: bold; font-size: 15px; text-transform: uppercase;}.
   wpb_tour_tabs_wrapper .wpb_tabs_nav li.ui-tabs-active{ background-color: #21a8d1!
   important; } .wpb_tour_tabs_wrapper .wpb_tabs_nav li.ui-tabs-active a{ color:#
   fff; } .main-navigation, .main-navigation ul ul { background-color: transparent!
   important; } .sf-menu > li a:hover{
 * transition: all 1s ease 0s;
    padding-bottom: 20px !important; } .sf-menu > li:
   nth-child(1) a{ background-color: #33AED2 !important; letter-spacing: 2px; text-
   transform: uppercase; } .sf-menu > li:nth-child(2) a{ background-color: #FF9000!
   important; letter-spacing: 2px; text-transform: uppercase; } .sf-menu > li:nth-
   child(3) a{ background-color: #68C59D !important; letter-spacing: 2px; text-transform:
   uppercase; } .sf-menu > li:nth-child(4) a{ letter-spacing: 2px; text-transform:
   uppercase; background-color: #BB73BD !important; } .sf-menu > li:nth-child(5)
   a{ background-color: #E84559 !important; letter-spacing: 2px; text-transform:
   uppercase; } .sf-menu > li:nth-child(6) a{ background-color: #030303 !important;
   letter-spacing: 1px; text-transform: uppercase; } .sf-menu > li:nth-child(7) 
   a{ letter-spacing: 2px; text-transform: uppercase; background-color: #030303 !
   important; } [@media](https://wordpress.org/support/users/media/) screen and (
   max-width:1111px) { .sf-menu > li a { letter-spacing: 0 !important; }
 * }
 * [@media](https://wordpress.org/support/users/media/) screen and (max-width:997px){
   .
   sf-menu > li:nth-child(6) a { letter-spacing: -1px !important; } } [@media](https://wordpress.org/support/users/media/)
   screen and (max-width:767px) { .sf-menu > li { width: 100%; } .main-navigation,.
   main-navigation ul ul { background-color: #68C59D !important; } .sf-menu > li:
   nth-child(6) a { letter-spacing: 0px !important; } .sf-menu > li a { text-align:
   center; } }

Viewing 1 replies (of 1 total)

 *  [dimitris33](https://wordpress.org/support/users/dimitris33/)
 * (@dimitris33)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/full-width-menu-2/#post-6633425)
 * you might need to change your html too, i think this rule controls the width
 *     ```
       body .grid-container
       ```
   

Viewing 1 replies (of 1 total)

The topic ‘Full Width Menu’ is closed to new replies.

## Tags

 * [full-width](https://wordpress.org/support/topic-tag/full-width/)
 * [menu](https://wordpress.org/support/topic-tag/menu/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 1 reply
 * 2 participants
 * Last reply from: [dimitris33](https://wordpress.org/support/users/dimitris33/)
 * Last activity: [10 years, 7 months ago](https://wordpress.org/support/topic/full-width-menu-2/#post-6633425)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics