Menu icon Foundation
Push .dropdown menu lower under top-bar

Hi

I'm a graphic designer who is starting to code and I'm pretty much self-taught in that area. Here's my issue:

I want to be able to push the .dropdown lower than it appear by default. The problem is when I add margin/padding to the top of the .dropdown, the traveling distance between the .has-dropdown and the actual .dropdown make disappear the latest before you reach its first sub-link.

In other word, how can I have about 20px between the bottom of the .has-dropdown link and the top of the .dropdown without having the drop down menu disappearing ?

I added a screenshot of how it looks right now. I want that the top of the red drop down (not the arrow) is aligned with the bottom of the black top-bar.

Excuse the quality of my english, it's not my primary language.

Thanks!! :)

Screen shot 2014 08 05 at 16.28.25

dropdownhas-dropdowntop-barFoundation 5lowerpush

Hi

I'm a graphic designer who is starting to code and I'm pretty much self-taught in that area. Here's my issue:

I want to be able to push the .dropdown lower than it appear by default. The problem is when I add margin/padding to the top of the .dropdown, the traveling distance between the .has-dropdown and the actual .dropdown make disappear the latest before you reach its first sub-link.

In other word, how can I have about 20px between the bottom of the .has-dropdown link and the top of the .dropdown without having the drop down menu disappearing ?

I added a screenshot of how it looks right now. I want that the top of the red drop down (not the arrow) is aligned with the bottom of the black top-bar.

Excuse the quality of my english, it's not my primary language.

Thanks!! :)

Screen shot 2014 08 05 at 16.28.25

This post has been closed. No new replies can be added.

Rafi Benkual over 5 years ago

Can you post a link to your page or your code so we can help you?

Eric Dumensil over 5 years ago

      <div class="contain-to-grid fixed">
        <nav class="top-bar hide-for-medium-down" data-topbar>
        <div class="nav-bg"></div>
          <ul class="title-area">
              <li class="name">
                <a href="#"><img src="img/Beehivr-logo-white.svg" alt="Beehivr Logo" width="150px" ></a>
              </li>
          </ul>
          <section class="top-bar-section">
            <ul class="right">
              <li><a href="#">home</a></li>
              <li><a href="#">tour</a></li>
              <li class="has-dropdown not-click">
                <a href="#">platform</a>
                <ul class="dropdown">
                  <li><a href="#">Who Benefits</a></li>
                  <li><a href="#">Use Cases</a></li>
                </ul>
              </li>
              <li><a href="#">design studio</a></li>
              <li><a href="#">company</a></li>
              <li><a href="#">blog</a></li>
              <li><a class="small button round" id="request-top" href="#">request a demo</a></li>
            </ul>
          </section>
        </nav>
      </div>
/* TOP-BAR STYLING */

.top-bar {
  height: 65px;
  line-height: 65px;
  background-color:transparent;
  padding-right: 30px;
}

.top-bar .title-area{
  margin-left: 1.1em;
  margin-top:0.2em;
}

.top-bar-section .right{
  margin-top:0.2em;
}

.contain-to-grid{
  background-color: transparent;
  padding-top: 18px;
}

.contain-to-grid .top-bar{
  max-width: 73.438em;
}

.top-bar-section ul li{
  background: transparent;
}

.top-bar-section li:not(.has-form) a:not(.button){
  background: transparent;
  text-transform: uppercase;
}

.top-bar-section li:not(.has-form) a:not(.button):hover{
  background: transparent;
  background-color: transparent;
  color:#e30913;
}

.top-bar-section ul li > a.button {
  font-family: Bariol;
  font-weight: 400;
  margin-left: 15px;
  background-color: transparent;
  border: 2px solid #e30913;
  text-transform: uppercase;
  margin-top: 0px;
}

.top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus{
  background-color: #e30913;

}

.top-bar-section ul li > a{
  font-family: Lato;
  font-weight: 300;
}

/* TOP-BAR DROPDOWN STYLING */

.dropdown{
  background-color: #e30913;
}

.top-bar-section ul li:hover:not(.has-form) > a:not(.button){
  background: none;
}

.top-bar-section .has-dropdown > a:not(.button):after{
  border: none;
  border-left-style: none;
  margin-right: 0;
  margin-top: 0;
  position: absolute;
  top: 0;
}

.top-bar-section .has-dropdown > a:not(.button){
  padding-right: 15px !important;
}

.top-bar-section li .dropdown{
  right: -1em !important;
}

.top-bar-section .dropdown li:not(.has-form) a:not(.button){
  background: #e30913;
}

.top-bar-section .dropdown{
  background: #e30913;
}

Nic Edwards over 5 years ago

Here's the solution. You needed to alter some margins in the CSS.

http://codepen.io/nemesisjoe/pen/vGtdK

Eric Dumensil over 5 years ago

Thanks for the help @Nic Edwards.

But I don't see anything in the code pen link you posted :S

Rafi Benkual over 5 years ago

Eric - Nic updated the codepen. You'll see the solution there. It was a matter of adding top and bottom margin to the link.

Eric Dumensil over 5 years ago

Thank you!! :D I really feel like an huuuge nooob lol