Header menu

Hi,

I am trying to align the drop down menu to the main categories menu but to no avail, I have tried the usual overflow:hidden, z-index and the position absolute but nothing seems to work.

In the photo I am trying to get the black area lined up to the bottom of the maroon header menu.

I have posted my CSS code below

Any advice gratefully received.

Using Version 4.20 with Default clean theme.


Regards

https://www.flickr.com/photos/185321986@N02//*** NAVIGATION ***/


  .header-menu {
    position: relative;
    z-index: 5;
    width: 100%;
    margin: 0 auto 30px;
    background-color: #840541;
    padding: 10px 0;
    text-align: center;
    display: inline-block;
    cursor: default;
  }

.menu-toggle,
.sublist-toggle {
  display: none;
}
  .header-menu > ul {
    display: block !important; /* prevents toggle display:none on resize */
    font-size: 0;
    width: 100%;
  }
    
.header-menu > ul.mobile {
  display: none !important;
}
    .header-menu > ul > li {
      display: inline-block;
      /*border-left: 1px solid #ddd;*/
      padding: 0 2px;
      vertical-align: middle;
    
    }
      .header-menu > ul > li:first-child {
        border-left: none;
        list-style-type: none;

      }
      .header-menu > ul > li > a {
        /*display: block;*/
        padding: 5px 5px;
        line-height: 20px;
        font-size: 17px; /*reset zeroing*/
        color: #fff;
        /*cursor: pointer;*/

      }
        .header-menu > ul > li > a:hover {
          color: #fff;

        }


  .header-menu .sublist {
    display: none;
    position:absolute;
    width: 90%;
    box-shadow: 0 0 2px rgba(0,0,0,0.0);
    /*background-color: #840541;*/
    background-color: #000;
    padding: 10px 0;
    text-align: left;
    /*overflow: hidden;*/
    margin-top: 0px;
    z-index: 4;

  }
  .header-menu .sublist li {
    
    width: 20%;
    float: left;
    display: block;
  }
    .header-menu .sublist li a {
      display: block;
      position: relative;
      white-space: nowrap;
      padding: 15px 10px 10px 10px;
      font-size: 14px;
      color: #000;
    }
    .header-menu .sublist li a:before {
      position: absolute;
      top: 17px;
      left: 15px;
      width: 5px;
      height: 5px;
      background-color: #ddd;
    }
    .header-menu .sublist li:hover > a {
      /*background-color: #fff;*/
    }
.header-menu ul li:hover > .sublist {
  display: block;
}
  .header-menu .sublist .sublist {
    top: -10px;
    left: 100% !important;
  }

Not details enough to answer this question. Can you please share this page url instead of screenshot?

mhsjaber wrote:

Hi,

There is a flickr link to the screenshot between the regards and the css code.

I don't have a live url as I am testing everything on my laptop first befor it goes on the live site.


Regards

Hi  garrie007,

judging from the code you have provided you need to change a couple of things in order for this to work as you want it to.

 .header-menu {
    position: relative;
    z-index: 5;
    width: 100%;
    margin: 0 auto 30px;
    background-color: #840541;
    padding: 10px 0;   /* remove this line  */
    text-align: center;
    display: inline-block;
    cursor: default;
  }
.header-menu > ul > li {
      display: inline-block;
      /*border-left: 1px solid #ddd;*/
      padding: 0 2px;
      vertical-align: middle;
    position: relative; /* add this line */
}
 .header-menu > ul > li > a {
        /*display: block;*/
        padding: 5px 5px;    ---> padding: 15px 5px;   /* change this line */
        line-height: 20px;
        font-size: 17px; /*reset zeroing*/
        color: #fff;
        /*cursor: pointer;*/
 }

 .header-menu .sublist {
    display: none;
    position:absolute;
    width: 90%;
    box-shadow: 0 0 2px rgba(0,0,0,0.0);
    /*background-color: #840541;*/
    background-color: #000;
    padding: 10px 0;
    text-align: left;
    /*overflow: hidden;*/
    margin-top: 0px;
    z-index: 4;
    top: 100%;   /* add this line */
}

Hope this was helpful.

Best Regards,
Valentin.

Nop-Templates.com wrote:

thank you very much.