Title: Full-width submenu
Last modified: June 5, 2018

---

# Full-width submenu

 *  [richardepl](https://wordpress.org/support/users/richardepl/)
 * (@richardepl)
 * [8 years ago](https://wordpress.org/support/topic/full-width-submenu/)
 * Fellow WordPressers, I could really use some assistance:
 * I’ve put the navbar at the very top of the page.
 * I want the sub-menu to be a full-width bar (much like the main menu itself) placed
   directly under the main menu (instead of the sub-“boxes”).
 * I can’t seem to figure out the CSS. But maybe it’s more than just CSS?
 * Any tips & tricks is much appreciated.
 * Richard

Viewing 9 replies - 1 through 9 (of 9 total)

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [8 years ago](https://wordpress.org/support/topic/full-width-submenu/#post-10364478)
 * I can help you if you show the website.
 *  Thread Starter [richardepl](https://wordpress.org/support/users/richardepl/)
 * (@richardepl)
 * [8 years ago](https://wordpress.org/support/topic/full-width-submenu/#post-10364487)
 * Great! Of course,
 * [Spring Constant](http://www.spring-constant.com/Wordpress/)
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [8 years ago](https://wordpress.org/support/topic/full-width-submenu/#post-10365162)
 * In the “Additional CSS” section of the dashboard add this:
 *     ```
       @media screen and (min-width: 768px) {
           /* Containers */
           .main-navigation li,
           #masthead .wrap  {
               position: static;
           }
   
           /* Top-level links */
           .main-navigation ul > li a {
               position: relative;
           }
   
           /* Top-level items spacer to help predictable hover space */
           .main-navigation ul > li a::after {
               bottom: -100%;
               content: '';
               height: 100%;
               left: 0;
               position: absolute;
               width: 100%;
           }
   
           /* Submenu pseudo element */
           .main-navigation ul li.menu-item-has-children.focus:before, 
           .main-navigation ul li.menu-item-has-children:hover:before, 
           .main-navigation ul li.menu-item-has-children.focus:after, 
           .main-navigation ul li.menu-item-has-children:hover:after, 
           .main-navigation ul li.page_item_has_children.focus:before, 
           .main-navigation ul li.page_item_has_children:hover:before, 
           .main-navigation ul li.page_item_has_children.focus:after, 
           .main-navigation ul li.page_item_has_children:hover:after {
               display: none;
           }
   
           /* Submenu position */
           .main-navigation ul li:hover > ul, 
           .main-navigation ul li.focus > ul {
               left: 0;
               width: 100%;
           }
   
           /* Dropdown items */
           .main-navigation ul li {
               float: left;
           }
   
           /* 2nd level Submenu position */
           .main-navigation ul ul li:hover > ul,
           .main-navigation ul ul li.focus > ul {
               left: 0;
               top: 100%;
           }
   
           /* Dropdown icons */
           .main-navigation ul ul .menu-item-has-children > a > .icon, 
           .main-navigation ul ul .page_item_has_children > a > .icon {
               -webkit-transform: rotate(0deg);
               -ms-transform: rotate(0deg);
               transform: rotate(0deg);
           }
       }
       ```
   
 * _[https://codex.wordpress.org/CSS#Custom\_CSS\_in\_WordPress](https://codex.wordpress.org/CSS#Custom_CSS_in_WordPress)_
 *  Thread Starter [richardepl](https://wordpress.org/support/users/richardepl/)
 * (@richardepl)
 * [8 years ago](https://wordpress.org/support/topic/full-width-submenu/#post-10370305)
 * Thanks a lot, Andrew!
 * I hate to ask again, but is there a way to have the sub menu items placed directly
   under the main menu items (when hover)? Been trying out different combinations
   all day but to no avail :S
 * Richard
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [8 years ago](https://wordpress.org/support/topic/full-width-submenu/#post-10374710)
 * I don’t understand what you want, can you illustrate it in an image?
 *  Thread Starter [richardepl](https://wordpress.org/support/users/richardepl/)
 * (@richardepl)
 * [8 years ago](https://wordpress.org/support/topic/full-width-submenu/#post-10374790)
 * As it is now, the submenu items goes all the way to the left, while the main 
   menu items are centered – which makes an awkward jump between the two. I would
   like the submenu items to be positioned directly under, or at least centered 
   on the bar.
 * [This](http://www.spring-constant.com/demo.html) is what I’m aiming for.
 * Thanks beforehand
 * R
 *  [wersaq91](https://wordpress.org/support/users/wersaq91/)
 * (@wersaq91)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/full-width-submenu/#post-10844391)
 * Hellow Andrew i have same problem, can you help me to??
 * im using template from [http://rt19-demo10.rtthemes.com/](http://rt19-demo10.rtthemes.com/)
 * and i want to have full width dropdown like [https://www.intercompcompany.com/](https://www.intercompcompany.com/)
 * thank you
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [7 years, 7 months ago](https://wordpress.org/support/topic/full-width-submenu/#post-10844764)
 * [@wersaq91](https://wordpress.org/support/users/wersaq91/), If you have the 2017
   theme then we can help you achieve that. Otherwise you have to use the support
   for your theme.
 *  [halmasonberg](https://wordpress.org/support/users/halmasonberg/)
 * (@halmasonberg)
 * [7 years, 2 months ago](https://wordpress.org/support/topic/full-width-submenu/#post-11375175)
 * This is close. The menu dropdown items are now displaying horizontally with the
   code shared above, but the sub-menus within those categories show up at the bottom
   left and go away when I try and move the mouse to them. Is there a way to make
   them appear under the dropdown menu items?

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Full-width submenu’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/twentyseventeen/4.1/screenshot.
   png)
 * Twenty Seventeen
 * [Support Threads](https://wordpress.org/support/theme/twentyseventeen/)
 * [Active Topics](https://wordpress.org/support/theme/twentyseventeen/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/twentyseventeen/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/twentyseventeen/reviews/)

## Tags

 * [submenu](https://wordpress.org/support/topic-tag/submenu/)

 * 9 replies
 * 4 participants
 * Last reply from: [halmasonberg](https://wordpress.org/support/users/halmasonberg/)
 * Last activity: [7 years, 2 months ago](https://wordpress.org/support/topic/full-width-submenu/#post-11375175)
 * Status: not resolved