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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mohan singhWeb developerCommented:
This solution is worked properly
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.