CODEWITHSUNDEEP
htmlcss
factordog
factordog

Reputation: 597

Menu not aligning horizontally

Coding a menu that appears when it reaches a device size of 1024 to replace a previous menu. Problem is that it is not aligning horizontally but menu option is stacking vertically above one another. Unfortunately the site is not live.

But here is the basic code, as it is a very simple menu layout at the moment

HTML: 

<!--===================================================2nd Menu===================================================!-->
<div class="menu_scaled_wrapper">
    <div class="menu_scaled">
        <nav ul>
            <li><a href="index.html#home" class="smoothScroll">HOME</a></li>
            <li><a href="#portfolio" class="smoothScroll">PORTFOLIO</a></li>
            <li><a href="contact.html">CONTACT</a></li>
        </nav>
    </div>  
</div>

CSS: 

/*----------------------------Menu 2----------------------------*/
.menu_scaled_wrapper{
    display:none;
    top: 0;
    left: 0;
    background: #f6f6f6;
    background: rgba(0,0,0,.6);
    position:fixed;
    height:80px;
    width:100%;
    z-index:5000;
    overflow: hidden;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    transition: height 0.3s;
    -moz-box-shadow: -2px 5px 10px 0px #000;
    -webkit-box-shadow: -2px 5px 10px 0px #000;
    box-shadow: -2px 5px 10px 0px #000;
    z-index:5000;
}
.menu_scaled{
    position:relative;
    width:100%;
    height:100%;
}
.menu_scaled nav{
    list-style:none;
    margin:4% 50%;
}
.menu_scaled nav a{
    color: #aaa;
    font-weight: 700;
    font-size: 1em;
}
.menu_scaled nav a:hover {
    color:#900;
    transition:0.5s;
}
/*---------------------------- Menu Scaling ----------------------------*/
@media screen and (max-width: 1024px){
    .cbp-af-header{
        display:none;
    }
    .menu_scaled_wrapper{
        display:inline-block;
    }
    .faderwrap{
        margin-top:80px;
    }
}

Upvotes: 1

Views: 77

Answers (3)

john.weland
john.weland

Reputation: 266

I believe you are looking for something like this.

/*----------------------------Menu 2----------------------------*/
.menu_scaled_wrapper{
    display:none;
    background: #f6f6f6;
    background: rgba(0,0,0,.6);
    position:fixed;
    height:80px;
    width:100%;
    z-index:5000;
    overflow: hidden;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    transition: height 0.3s;
    -moz-box-shadow: -2px 5px 10px 0px #000;
    -webkit-box-shadow: -2px 5px 10px 0px #000;
    box-shadow: -2px 5px 10px 0px #000;
    z-index:5000;
}

nav ul {
  display: block;
  width: 50%;
  text-align: center;
  list-style: none;
  padding: 0;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  line-height: 80px;
}

li {
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
}
nav a {
    color: #aaa;
    font-weight: 700;
    font-size: 1em;
}
nav a:hover {
    color:#900;
    transition:0.5s;
}
/*---------------------------- Menu Scaling ----------------------------*/

@media screen and (min-width: 1024px){
    .cbp-af-header{
        display: none;
    }
    .menu_scaled_wrapper {
        display: inline-block;
    }
}
    <!--===================================================2nd Menu===================================================!-->
<div class="menu_scaled_wrapper">
  <nav>
    <ul>
      <li><a href="index.html#home" class="smoothScroll">HOME</a></li>
      <li><a href="#portfolio" class="smoothScroll">PORTFOLIO</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>
  </nav>
</div>

You can see a demo here http://codepen.io/johnweland/pen/EVvodq. I did this while trying to alter as little of your code as possible as I don't know what dependencies you have. The biggest problem I saw was your margin 4% 50% on the ul. This was breaking your layout keeping it from displaying inline.

Also if you don't need a lot of legacy support for browsers you could look into CSS3 flex-box which in my opinion is a godsend.As it makes it simple to align items in various ways. Which you can read about on the Mozilla Developer Network.

Upvotes: 1

ngstschr
ngstschr

Reputation: 2329

You should apply display: inline-block or float: left to the 'li' elements.

Upvotes: 0

Gershom Maes
Gershom Maes

Reputation: 8178

You'll need to apply inline-block style to each of the list elements, instead of one of their parents. This is because display is not an inherited attribute, so children elements will not display as inline-block just because their parents do.

Try this:

@media screen and (max-width: 1024px){
    .cbp-af-header{
        display:none;
    }
    /* This selector is the change! It targets the individual list items */
    .menu_scaled_wrapper > .menu_scaled > ul > li {
        display:inline-block;
    }
    .faderwrap{
        margin-top:80px;
    }
}

Upvotes: 0

Related Questions