Responsive site?

HTML & CSS
1

Im trying to make some sort of responsive site where around 20-30% of both left/right site are empty on large monitors.

Here is the html for the header:

    <header id="Site-header"> 
	<div class="LinkReel">
	  <div class="LinkContainer">
	    <ul id= "navlist" class="TopNav">
          <li><a href="#home">Home</a></li>
          <li><a href="#news">About</a></li>
          <li><a href="#contact">Browse</a></li>
	      <li><a href="#contact">Reviews</a></li>
	      <li><a href="#contact">Resources</a></li>
          <li><a href="#about">Community</a></li>
        </ul>
	  </div>
	</div>
  </header>

I have tried with CSS and move the nav bar a little from the left site , but this not work as I want. How can I make this behave as most modern sites do ?

CSS:

#Site-header {
	display: inline-block;
	position:fixed;
	width: 100%;
	top:0;
	z-index: 1;
	margin: auto;
	height: 185px;
	position: relative;
}
#Site-header h1 {
	position: relative;
	float: left;
	left: 15%;
	top: 25px;
	color: #000;
}

    .LinkReel {
	position: absolute;
	height: 122px;
	width: 100%;
	bottom: 0;
    font-family: 'Trebuchet MS', 'Lucida Grande',
    Verdana, Lucida, Geneva, Helvetica, 
    Arial, sans-serif;
    font-size: 20px;
	color: #335485;	
	background: #4f627c;
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    background: linear-gradient(to bottom, rgba(78,109,156,1) 1%,rgba(51,84,133,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border-bottom: 1px solid rgba(184,186,198,1); 
}

    .LinkContainer {
	position: absolute;
	top: 95px;
	left: 15%;
	height: 47px;
	border-radius: 5px;
	width: 70%;
	background: -webkit-linear-gradient(top, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */
}
   .TopNav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#navlist li {
	position: relative;
    float: left;

}
#navlist li a {
	height: 47px;
	position: relative;
    display: block;
	text-decoration   : none;
    padding: 10px 30px;
	border-right: 1px solid rgba(245,246,246,0.8);
    box-shadow: 1px 0px 0px 0px rgba(0,0,0,0.25);
    color: #1E406E;
    
}
#navlist li:last-child a {
	border-right: none;
	box-shadow: none;
}

Here is a link to codepen: https://codepen.io/frederik84/pen/KRRpgV

What I want is left, And right empty spaze to shrink in and out on zoom

2

Using absolute positioning is not a good idea. I think you would be better off using a max-width and margin auto to centre your nav.
You nav links are using float, it may work better using display table or flex instead.

3

Hi thanks for your reply , I think there are several errors in the css code above. I have worked with this troughout the day . And here is my updated sample: its working much better now. There are still some work to be done when zoom reches the threshold of 700px but I think im

Im not sure I like how the zoom behaves on “topnav” div element tough

4

I’m not sure exactly what you want it to look like, but here is a modified version using flex for the nav. It probably still needs some tweaks, but is a start.
I removed lots of bad stuff like fixed heights and unnecessary positioning and floats.

You may prefer a “hamburger” to the flex wrap, it’s up to you.

1 Like
5

Hi thanks for your help . I also liked your version… I can see that you have put some time into helping me and it its much appreciated,

“You may prefer a “hamburger” to the flex wrap, it’s up to you.”

  • What does that mean :slight_smile: ?
6

A “hamburger” is a minified menu which is often used in mobile sites to save space.
It is usually a square icon with horizontal lines which you tap to open the full menu.

7

Ok I understand ., Yes you are right my next plan is to implement this.

8

what did you think about my 2nd edit ?

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.