Make my header responsive even with no list html codes

Hi I was wondering can I make this header responsive when if its not in a HTML listing?
this is what i mean by resposive
<div id= "header">
		<span id= "nav" class= "block desktop width100 anew">

			<a class= "pageLink inlineBlock uppercase" href= "hs" style="margin-left:-10px">
				<span class= "text" id="Mu"> Order </span>
			</a>
			<a class= "pageLink inlineBlock uppercase" href= "works">
				<span class= "text" id="Hw"> How it works </span>
			</a>
			<a href= "yte" class = "inlineBlock pageLink home1">
				<img src= "http://blog.epicured.com/wp-content/uploads/2017/09/logo_white.png" height = "45px" width = "165px">
			</a>
				<a class= "pageLink inlineBlock uppercase" href="test"> 
					<span class= "pageLink inlineBlock uppercase text" id="At"> About </span>
				</a>
			<a class= "pageLink inlineBlock uppercase" href= "test">
				<span class= "text" id="FQ"> FAQS </span>
			</a>
		<?php if($_SESSION['email'] == ''){?>
			<a href="test">
				<span id= "authLink" class= "uppercase pointer absolute" style="right: 8px !important;">
				<span class= "pageLink text">Log In/Sign up</span>
				</span>
			</a>
		<?php }
				else{?>
				<a href="test">
				<span id= "authLink" class= "uppercase pointer absolute" style="right: 85px !important;">
					<span class= "pageLink text">My Account |</span>
				</span></a>
				<a href="test">
				<span id= "authLink" class= "uppercase pointer absolute">
					<span class= "pageLink text">Log out</span>
				</span></a>
				<?php	}?>

</span>

	</div>

Open in new window


CSS:
the ones I tried were the @media but it did not work
.uppercase{
text-transform: uppercase;
}
.pageLink{
margin: auto 18px;
align-self: center;
position:relative;
vertical-align:middle;
font-size:0.9em;
letter-spacing: 1px;
white-space: nowrap;
	font-family: open_sansregular;
}

.pageLink{
text-decoration:none;
color:white !important;
}
.uppercase{
text-transform: uppercase;
}
#header{
height: 55px;
text-align:center;
width: 100%;
position:fixed;
top: -2px;
z-index: 6;
background-color: rgba(24,24,29,0.4);
background: url('http://blog.epicured.com/wp-content/uploads/2017/09/head1.png');
}
.block{
display:block;
}
.anew a:hover{
text-decoration:none;
color:white;
}
.width100{
width:99%;
	margin-top:8px;
}
#authLink{
z-index: 500;
top: 32%;
right: 15px;
font-size: 0.8em;
position: absolute;
}
@font-face {
    font-family: "open_sansregular";
    src: url(http://blog.epicured.com/wp-content/themes/flat/opensans-regular-webfont.ttf) format("truetype");
}
.open_sansregular{
    font-family: "open_sansregular";	
}

.dropbtn {
    background-color: transparent;
    color: white;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content1 {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content1 a {
    color: black !important;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
	
}

.dropdown-content1 a:hover {background-color: #f1f1f1; color: #191010;}

.dropdown:hover .dropdown-content1 {
    display: block;
}
@media (max-width: 599px) {
  #header .container {
    width: 100%;
  }
  #header h1 {
    padding-left: 3%;
  }
  #nav {
    width: 100%;
    top: 60px;
  }
  #nav:before {
    content: '\2630';
    display: block;
    position: absolute;
    right: 3%;
    top: -50px;
    line-height: 40px;
    font-size: 1.4em;
    cursor: pointer;
  }
  #nav span {
    background: #222;
    width: 100%;
    margin: 0px;
  }
  #nav span {
    float: none;
  }
  #nav span a {
    padding: 10px 20%;
    line-height: 20px;
    border-top: 1px solid #333;
  }
} 

Open in new window


Please advise!
LVL 1
Jazzy 1012Asked:
Who is Participating?
 
mohan singhWeb developerCommented:
Yes you can

Below code required some file for make responsive (like bootstrap.min.JS and css)

HTML
put your data in li section
<!-- html -->
<input type="checkbox" id="navbar-checkbox" class="navbar-checkbox">
<nav class="menu">
  <ul>
    <li>Home</li>
    <li>About us</li>
    <li>
      Our company
      <ul>
        <li>History</li>
        <li>Very long and tedious history</li>
      </ul>
    </li>
    <li>Our team</li>
    <li>Contact us</li>
  </ul>
  
  <label for="navbar-checkbox" class="navbar-handle"></label>
</nav>

Open in new window


CSS

// Smaller menu when on small screen
// All padding and margin are in em, so they will scale as well
@media (min-width : 900px) {
  .menu {
    font-size: 1.2em;
  }
}

.menu {
  padding: 0.5em;
  background: #eee;
  min-height: 2em;
  line-height: 1em;

  > ul {
    transition: max-height .25s linear;    
  }
  
  ul {
    margin: 0;
    padding: 0;
    text-align: center;
  }
  li {
    // visibility transition is on li because multiple transition selectors is not well supported
    transition: visibility .25s linear;
    display: inline-block;
    border: 1px solid;
    padding: .45em 1.1em;
    margin: 0 .3em;
    position: relative;
  }
}

@media (min-width : 651px) {
  .menu {
      li { // nested menu
        ul {
          display: none;
          position: absolute;
          top: 100%;
          margin-top: 1px;
          left: -1px;
          right: -1px;
        }
        &:hover ul {
          display: block;
        }
        li {
          margin: -1px 0 0 0;
          box-sizing: border-box;
          width: 100%;
        }
     }
  }
}

@media (max-width : 650px) {
  .menu {
    > ul {
      max-height: 0;
      overflow: hidden;
      margin: 0 3.5em 0 1em;
    }

    li {
      visibility: hidden;
      display: block;
      padding: 0.5em 0.6em;
      border: none;
    }
    
    li { // nested menu
      ul {
        margin-top: 0.5em;
        border-left: 1px solid #000;
      }
    }

    .navbar-handle {
      display: block;
    }
  }
  
  #navbar-checkbox:checked + .menu {
    ul {
      max-height: 300px;
    }
    
    li {
      visibility: visible;
    }
    .navbar-handle {
      &, &:after, &:before {
        border-color: #aaa;
      }
    }
  }
}

.navbar-checkbox {
    display: none;
}

.navbar-handle {
    @height: 45px; // just a reference to compute em values on the fly
    display: none;
    cursor: pointer;
    position: relative;
    font-size: @height;
    padding: .5em 0;
    height: 0;
    width: 1em * 75px / @height;
    border-top: (1em * 6px / @height) solid;

    &:before, &:after {
        position: absolute;
        left: 0;
        right: 0;
        content: ' ';
        border-top: (1em * 6px / @height) solid;
    }

    &:before {
        top: 1em * 17px / @height;
    }

    &:after {
        top: 1em * 40px / @height;
    }
}



///////////

.menu {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  
  .navbar-handle {
    position: absolute;
    font-size: 1.2em;
    top: 0.7em;
    right: 12px;
    z-index: 10;    
  }
}

Open in new window

0
 
mohan singhWeb developerCommented:
This solution is worked properly
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.