Responsive Menu

Question

Is there a better way of making footer menu for responsive? rather than duplicating and display: none; in the css?

Here are my attempts:

<header class="row">
    <div class="container">
      <div class="col-12 columns">
        <img src="images/logo.png" alt="" class="logo">

        <a href="#nav" class="nav-link">Navigation</a>

          <nav role="primary" >
            <ul id="nav">
              <li><a href="">Home</a></li>
              <li><a href="about.html">About Me</a></li>
              <li><a href="blog.html">Blog</a></li>
              <li><a href="">Contact</a></li>
            </ul>
          </nav>
      </div>
    </div>
  </header>

Footer nav. Commented out the nav for the purpose of this question.

<nav role="secondary_menu">
<!--   <ul id="nav2">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Me</a></li>
    <li><a href="blog.html">Blog</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</nav> -->
<footer id="footer">
  <div class="container">
    <p>Created by: </p>
  </div>
</footer>

CSS:

a.nav-link{
    float: right;
    text-align: center;
    text-decoration: none;
    background: #808080;
    color:#fff;
    font-weight: bold;
    padding:1em 2em;
    margin-top: 1.5em;
}

nav[role="primary"] ul{
    list-style-type: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

nav[role="primary"] ul li a{
    text-decoration: none;
    font-weight: bold;
    background: #3c3c3c;
    display: block;
    padding:.75em;
    color:#ccc;
    border-bottom: 1px solid #ccc;
}

.container .columns{
float: left;
margin: 0 0 0 0;
padding-right: 1em;
padding-left: 1em;
}

.row{
    float: left;
    clear: both;
    width: 100%;
}
.columns.col-12 { width: 100%; }

So the codes above shows when the screen is below 600px however this way it pushes the footer the menu rather than at the bottom, Sure I positioned the footer absolute but it just sits above the menu rather than under it. So I made another attempt which I duplicated the nav and just hiding the when its below 600px.

position:none

position:absolute

Trying to achieve without duplicating and remove whitespace

Answer 1

I saw your main nav was set to position: absolute. I would suggest looking at CSS templates to see how they structure things like footers. For example, http://bootswatch.com/default/ Try this CSS:

a.nav-link{
float: right;
text-align: center;
text-decoration: none;
background: #808080;
color:#fff;
font-weight: bold;
padding:1em 2em;
margin-top: 1.5em;
}

nav[role="primary"] ul{
list-style-type: none;
bottom: 0;
left: 0;
width: 100%;
}

nav[role="primary"] ul li a{
text-decoration: none;
font-weight: bold;
background: #3c3c3c;
display: block;
padding:.75em;
color:#ccc;
border-bottom: 1px solid #ccc;
}

.container .columns{
margin: 0 0 0 0;
padding-right: 1em;
padding-left: 1em;
}

.row{
    margin-right: -15px;
    margin-left: -15px;
    clear: both;
    width: 100%;
}
.columns.col-12 { width: 100%; }