Title: Gap between menu and header elements
Last modified: August 6, 2022

---

# Gap between menu and header elements

 *  [bluelee22](https://wordpress.org/support/users/bluelee22/)
 * (@bluelee22)
 * [3 years, 10 months ago](https://wordpress.org/support/topic/gap-between-menu-and-header-elements/)
 * Hi Guys,
 * First of all : Awesome theme !!!
 * **I have 3 questions : **
 * **1-)** I can’t figure out how to fix the gap between the menu and the header
   elements (cart, user, search icons). I tried all the menu/header/global layout
   settings, but wasn’t able to solve the issue.
 * It seems that the only options that interacts with this issue is the: Header 
   and topbar> Header layout and style> Header menu options> Spacing (px); I tried
   to put in the buttom field (-10px) but did not solve the issue.
 * I’m having this issue with the 1st and 3rd menu layout, the second one is fine.
 * [https://ibb.co/NxyjHgj](https://ibb.co/NxyjHgj)
    [https://ibb.co/DCWc63N](https://ibb.co/DCWc63N)
 * **2-)** I would like to know how to change the layout and add a header (that 
   will include the page title and breadcrumbs) into the Shop, single product, my
   account, etc… pages.
 * **3-)** Is it possible to display attributes in the shop/category pages?
 * Thanks again.

Viewing 1 replies (of 1 total)

 *  [Armando](https://wordpress.org/support/users/geckod22/)
 * (@geckod22)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/gap-between-menu-and-header-elements/#post-15944801)
 * Hi there,
    about 1, that is correct, there’s a gap because the cointainer are
   not on the same line in that two layouts.
 * You could try to change that with some custom css code
 *     ```
       @media only screen
       and (min-width : 1024px) {
          /* layout 1 */
         .site-header.left_logo_navigation_below .header-contents {
       display: grid;
       grid-template-columns: 70% 30%;
         grid-template-rows: auto;
         grid-template-areas: 
           "header header"
           "main sidebar";
   
       }
       .site-header.left_logo_navigation_below .header-contents > .site-branding {
         grid-area: header;
       }
       .site-header.left_logo_navigation_below .header-contents > .main-navigation {
         grid-area: main
       }
   
       .site-header.left_logo_navigation_below .header-contents > .header-sidebar {
        grid-area: sidebar
       }
   
         /* layout 3 */
       .site-header.center_logo_navigation_below .header-contents {
       display: grid;
       grid-template-columns: 70% 30%;
         grid-template-rows: auto;
         grid-template-areas: 
           "header header"
           "main sidebar";
   
       }
       .site-header.center_logo_navigation_below .header-contents > .site-branding {
         grid-area: header;
       }
       .site-header.center_logo_navigation_below .header-contents > .main-navigation {
         grid-area: main
       }
   
       .site-header.center_logo_navigation_below .header-contents > .header-sidebar {
        grid-area: sidebar
       }
   
       }
       ```
   
 * about 2, I am not sure what you want to accomplish as the theme just add a title
   with breadcrumb in that pages
 * about 3, you can try to give a look to this free plugin [https://wordpress.org/plugins/yith-color-and-label-variations-for-woocommerce/](https://wordpress.org/plugins/yith-color-and-label-variations-for-woocommerce/)

Viewing 1 replies (of 1 total)

The topic ‘Gap between menu and header elements’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/yith-proteo/1.9.8/screenshot.png)
 * YITH Proteo
 * [Support Threads](https://wordpress.org/support/theme/yith-proteo/)
 * [Active Topics](https://wordpress.org/support/theme/yith-proteo/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/yith-proteo/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/yith-proteo/reviews/)

## Tags

 * [Display Issue](https://wordpress.org/support/topic-tag/display-issue/)
 * [layout](https://wordpress.org/support/topic-tag/layout/)
 * [menu](https://wordpress.org/support/topic-tag/menu/)
 * [Shop page](https://wordpress.org/support/topic-tag/shop-page/)
 * [single product page](https://wordpress.org/support/topic-tag/single-product-page/)

 * 1 reply
 * 2 participants
 * Last reply from: [Armando](https://wordpress.org/support/users/geckod22/)
 * Last activity: [3 years, 9 months ago](https://wordpress.org/support/topic/gap-between-menu-and-header-elements/#post-15944801)
 * Status: not resolved