Hey guys is it possible to make navigation bar stay in header no matter padding? Coz i want to make The Site title and menu in one line and i thought padding would do that...
#banner {
background-color: #d3135a;
height: 120px;
margin-bottom: 4%;
}
h1 {
float: left;
padding-bottom: 6%;
}
#pav {
font: Trebuchet MS;
float: left;
padding-left: 4%;
margin-top: 4%;
}
#menu_virsut li {
display: inline;
}
#menu_virsut {
float: right;
margin-top: 5%;
padding-right: 4%;
padding-bottom: 2%;
padding-top: 1%;
}
<header id="banner">
<h1>The Site</h1>
<nav id="menu_virsut">
<ul>
<li><a href>menu link</a>
</li>
<li><a href>menu link</a>
</li>
<li><a href>menu link</a>
</li>
</ul>
</nav>
</header>
A simple way for alignment is to set the same line-height for the h1 tag and the container. Your href tags don't have a link. "#" is what you would put if you don't want the link to go anywhere.
JSFiddle: http://jsfiddle.net/9vwjbq8n/
#banner {
background-color: #d3135a;
height: 120px;
margin-bottom: 4%;
}
h1 {
float: left;
line-height: 120px;
}
#pav {
font: Trebuchet MS;
float: left;
padding-left: 4%;
margin-top: 4%;
}
#menu_virsut li {
display: inline;
}
#menu_virsut {
float: right;
line-height: 120px;
}
Yes, remove the margins from each element in your header, or more like it, fix their values.
e.g. remove margin-top: 5%; from menu_virsut
Your markup is wrong, as a general rule, if you're creating a navigation menu you should create a <ul> tag and put all the nav items inside, then you can use float: right; on that <ul> element. If you want a logo, create another <ul> element and give it property float: left;. Make sure all the margins are okay and you're done.
I have created an example jsfiddle to illustrate how to write a good header/ navigation menu. https://jsfiddle.net/akhzywag/
Related
Trying to get a title to appear inline between the Logo and the navbar links. I'm trying to learn without bootstrap first and ideally without flexbox (want to know the basics first).
I've been trying 'display: inline' and different 'position' values in different spots but I'm getting lost.
#header-img {
margin-left: 20px;
margin-top: 10px;
height: 100px;
width: 100px;
float: left;
}
#nav-bar {
text-align: right;
padding: 20px;
background-color: #A7A7A9;
}
li {
display: inline;
list-style: none;
}
ul {
top: 5px;
left: 10px;
}
.nav-link {
width: auto;
height: 50px;
margin-left: 40px;
margin-top: 25px;
display: inline-block;
color: #453F3C;
font-size: 20px;
font-weight: 500;
letter-spacing: .9px;
text-decoration: none;
}
<header id="header">
<div class="logo">
<img id="header-img" alt="company logo" src="https://preview.ibb.co/jabJYd/rocket_1976107_1280.png">
</div>
<h1>Title</h1>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#our-services">Our Services</a></li>
<li><a class="nav-link" href="#reviews">Reviews</a></li>
<li><a class="nav-link" href="#locations">Locations</a></li>
</ul>
</nav>
</header>
to learn more about css positioning use the following link : https://www.w3schools.com/Css/css_positioning.asp and to learn more about positioning read this article : https://www.w3schools.com/Css/css_inline-block.asp
You also need to look at using percentages for your widths.
In your code, the navbar and the title are the two parent elements which need to be positioned and assigned widths in percentages for responsiveness. like this;
#nav-bar {
text-align: right;
background-color: #A7A7A9;
width: 79%;
float: right;
margin-top: 12px;
display: inline-block;
}
For the title :
h1{
display: inline-block;
width: 18%;
min-width: 77px;
float: left;
}
For the ul element in the navbar :
ul {
top: 0px;
left: 0px;
padding-left: 0px;
}
finally for the .navlinks :
.navlink{
width: auto;
margin-right: 7%;
display: inline-block;
color: #453F3C;
font-size: 19px;
font-weight: 500;
letter-spacing: .9px;
text-decoration: none;
}
I am new to development as well but I think what you are trying to do is the following.
HTML:
<nav id="nav-bar">
<ul>
<div class="new_div"><h1>Title</h1></div>
<li><a class="nav-link" href="#our-services">Our Services</a></li>
<li><a class="nav-link" href="#reviews">Reviews</a></li>
<li><a class="nav-link" href="#locations">Locations</a></li>
</ul>
</nav>
</header>
CSS:
.new_div{
float: left;
}
I just added the title as a new div inside the navigation menu and float it left. If there is a logo in between then you can add it in the navigation list and float it left.
You could use
header * {
display: inline;
}
to put everything inside <header> </header> inline.
If you plan to use the header tag elsewhere use a class or an id.
header.top-bar * {
display: inline;
}
To keep all with the same background:
header.top-bar {
width: 100%;
background-color: #A7A7A9;
}
Hope it helps you!
.header h1{position:absolute; left:50%; transform:translateX(-50%); }
Now it's centered between the logo and navigation. By setting the top property you can vertically move the element. Make sure you parent element's position set to relative.
I have a HTML5 header setup. It uses <ul> and <li> elements for the links.
This is the HTML:
<header>
<nav>
<ul>
<li id="logoli"><img src="/assets/logo.png" id="logo"></li>
<li>Home</li>
<li class="5px">Roulette</li>
<li>Free Stuff</li>
</ul>
</nav>
</header>
And the CSS:
header {
height: 100%;
width: 100%;
}
nav {
width: 100%;
height: 65px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
padding-left: 10px;
background-color: rgba(0, 0, 0);
color: #0077C5;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
float: left;
}
li {
width: 100px;
line-height: 65px;
vertical-align: middle;
text-align: center;
margin: 0;
text-align: center;
display: inline;
list-style: none;
float: left;
}
#logo {
height: 50px;
}
#logoli {
padding-top: 7px;
width: 250px;
}
For some reason this happens: https://image.prntscr.com/image/w0LAMn5qRMq0OqIAfDTsHw.png
If you look at the nav bar you can easily see that the first two elements have a normal amount of spacing in-between. But the seccond and third have weirdly small spacing. I used inspect element on the <li>'s but they are all the same height. Can someone help me?
You need some HTML and CSS Fixes, Wrap the anchors in li elements and the issue was you have mentioned a width to the li, which causes this wierd spacing.
HTML
<header>
<nav>
<ul>
<li id="logoli">
<img src="/assets/logo.png" id="logo"></li>
<li>Home</li>
<li class="5px">Roulette</li>
<li>Free Stuff</li>
</ul>
</nav>
</header>
CSS
header {
height: 100%;
width: 100%;
}
nav {
width: 100%;
height: 65px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
padding-left: 10px;
background-color: rgba(0, 0, 0);
color: #0077C5;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
float: left;
}
li {
line-height: 65px;
vertical-align: middle;
text-align: center;
margin:0px 10px;
text-align: center;
display: inline;
list-style: none;
float: left;
}
#logo {
height: 50px;
}
#logoli {
padding-top: 7px;
width: 250px;
}
You should put the <a href>'s inside the <li> tags like this:
<header>
<nav>
<ul>
<li id="logoli"><img src="/assets/logo.png" id="logo"></li>
<li>Home</li>
<li>Roulette</li>
<li>Free Stuff</li>
</ul>
</nav>
</header>
Also - you have a class="5px" on one of the <li>'s, but that class isn't in your CSS. You should make your <li>'s a fixed width and center the text, or use a standard padding on the left and right of the <li> text to maintain a uniform spacing rather than injecting classes to push single elements around.
This is happening because you're explicitly defining a width on your list items. Remove the width and separate the list items with padding instead. Optionally, remove any padding on the last list item, since you won't need it.
li {
/* width: 100px; */
padding-right: 1em;
line-height: 65px;
vertical-align: middle;
text-align: center;
margin: 0;
text-align: center;
display: inline;
list-style: none;
float: left;
}
li:last-child {
padding-right: 0;
}
https://jsfiddle.net/eulloa/yx7vkt79/
Also, restructure your list items so that they are the parent element of your anchors, not the other way around.
<li>Home</li> <!-- structure your list items this way -->
<li>Home</li>
This question already has answers here:
Width 100% with white borders around it. WHy?
(2 answers)
Closed 5 years ago.
I faced an issue today when I created the navigation bar I found a space between the screen and the navigation bar,
here's what I'm talking about
I want the navigation bar with full width, no space at all, I tried using width width: 100% but it didn't work.
Here's the code :
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #141414;
height: 80px;
border-radius: 5px;
}
li {
float: right;
display:inline;
list-style-type:none;
}
li a {
font-family: Julius Sans One, Arial;
font-size: 19px;
display: block;
color: white;
text-align: center;
padding: 30px 20px;
text-decoration: none;
}
.logoimg {
height: auto;
margin-left: 150px;
margin-top: 5px;
}
.left {
float: left;
}
<div>
<ul>
<li class="left"><img class="logoimg" src="/images/logo.png"></li>
<li><a>Test 1</a></li>
<li><a>Test 2</a></li>
</ul>
</div>
From the look of it, your navigation bar is full-width. The additional whitespace you are seeing is actually coming from <body>, which adds a margin of 8px by default. You can override this to ensure that your content is flush against the edge of the page:
body {
margin: 0; /* Added */
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #141414;
height: 80px;
border-radius: 5px;
}
li {
float: right;
display:inline;
list-style-type:none;
}
li a {
font-family: Julius Sans One, Arial;
font-size: 19px;
display: block;
color: white;
text-align: center;
padding: 30px 20px;
text-decoration: none;
}
.logoimg {
height: auto;
margin-left: 150px;
margin-top: 5px;
}
.left {
float: left;
}
<div>
<ul>
<li class="left"><img class="logoimg" src="/images/logo.png"></li>
<li><a>Test 1</a></li>
<li><a>Test 2</a></li>
</ul>
</div>
It's important to note that the <body> tag is always present, even when not explicitly written. This can be seen in the snippets here -- note that the original snippet appears to be offset from the edge and the line, whereas this does not, and all I added was an override for body margin.
Hope this helps! :)
What you are experiencing is the default window/page Padding/Margin. You can set this default value to 0 in order to have your full width/height of the page:
body{
margin: 0;
padding: 0;
}
This should correct your problem.
For some reason or another my navigation buttons are being pushed down by the image. I can solve the issue by floating the image but that does not interest me.
CSS:
.wrapped {
position: relative;
width: 70%;
margin: 0 auto;
}
.header {
width: 70%;
margin: 0 auto;
}
.headernav {
width: 70%;
margin: 0 auto;
height: 120px;
}
.logo, .logo img {
display: inline-block;
margin-right: 30px;
}
.nav {
padding-left: 30px;
display: inline-block;
height: 120px;
line-height: 120px;
vertical-align: middle;
}
.navbutton {
padding: 5px 30px;
display: inline-block;
}
#fitness, #wcontrol, #recipes, #supplementation {
text-align: center;
height: 36px;
line-height: 36px;
font-weight: bold;
}
HTML:
<div id="wrapperheader">
<div class="headernav">
<div class="logo"><img src="http://protein.guru/images/PGlogo.png" alt="Protein.guru Logo" class="logo"></div>
<div class="nav">
<div class="navbutton"><div id="recipes">Recipes</div></div>
<div class="navbutton"><div id="fitness">Fitness</div></div>
<div class="navbutton"><div id="wcontrol">Weight Control</div></div>
<div class="navbutton"><div id="supplementation">Supplementation</div></div>
</div>
</div>
</div>
If anyone knows why this is happening or of a simple solution, please let me know. Sorry if its an obvious answer.. I'm been staring at the code on and off for a day and it's just not clicking.
You could simplify your HTML & CSS to remove div soup, by moving the logo into the nav bar:
Usually the logo would be wrapped with an anchor tag, so that clicking on it will return the user to the home page. So it becomes a nav element.
HTML:
<div class="nav">
<div class="navlogo"><img src="http://protein.guru/images/PGlogo.png" alt="Protein.guru Logo" class="logo"></div>
<div class="navbutton"><span id="recipes">Recipes</span></div>
<div class="navbutton"><span id="fitness">Fitness</span></div>
<div class="navbutton"><span id="wcontrol">Weight Control</span></div>
<div class="navbutton"><span id="supplementation">Supplementation</span></div>
</div>
The HTML above uses spans, but you can also use <... class="navbutton" id="recipes">Recipes</...>, as shown below.
Optimized HTML: Generally people create UL LI tag stacks for nav bars.
<ul class="nav">
<li class="navlogo"><img src="http://protein.guru/images/PGlogo.png" alt="Protein.guru Logo" class="logo"></li>
<li class="navbutton" id="recipes">Recipes</li>
<li class="navbutton" id="fitness">Fitness</li>
<li class="navbutton" id="wcontrol">Weight Control</li>
<li class="navbutton" id="supplementation">Supplementation</li>
</ul>
Then cleaning up the CSS, will remove problems with applying duplicate right margins & paddings to both the .logo & .logo .img tags. In your example, there is also a left margin on the nav element, which was creating extra margin space between the logo & the 1st link.
In this CSS example below, I've also thrown in a vertical-align:middle; property, so that the nav links center vertically next to a larger image logo. See this jsfiddle.
CSS:
.nav {
height: 120px;
line-height: 120px;
margin: 0 auto;
vertical-align: middle;
width: 70%;
}
.nav li {
display: inline-block;
list-style-type: none; /* removes bullets */
}
.nav .logo,
.nav .navlogo,
.nav .navbutton {
display: inline-block;
}
.nav .logo {
vertical-align: middle;
}
.nav .navbutton {
font-weight: bold;
height: 36px;
line-height: 36px;
padding: 5px 0 0 30px;
text-align: center;
}
If you wants to keep width: 70% of your .wrapped container, you have to reduce padding of your nav menu and size of your image.
See this fiddle
(It works on large size of the window)
Otherelse, you can put a fixed width of the .wrapped container but still have to consider padding of your nav menu and width of the image to make it fits.
.navbutton {
padding: 5px 25px;
display: inline-block;
}
I've been trying to build a navbar for my website using Foundation. However, after I've tried the items in my menu bar are now appearing in reverse order. On the right hand side, rather than saying "portfolio about contact" it says "contact about portfolio". Any ideas?
HTML:
<div id="header-container">
<div id="header" class="row">
<nav class="nav-bar">
<ul class="left">
<li data-slide="1" class="andrewgu">andrewgu</li>
</ul>
<ul class="right">
<li data-slide="2" class="portfolio">portfolio</li>
<li data-slide="3" class="about">about</li>
<li data-slide="4" class="contact">contact</li>
</ul>
</nav>
</div><!--end header-->
</div><!--end header-container-->
CSS:
div#header ul{
height: 128px;
list-style-type: none;
}
div#header ul li {
background-color: #003264;
text-align: center;
height: 128px;
line-height: 128px;
transition: background-color 1s;
-webkit-transition: background-color 1s;
display: inline;
padding: 0;
margin: 0;
}
li.andrewgu {
width: 200px;
font-size: 60px;
}
li.portfolio {
float: right;
font-size: 30px;
width: 140px;
}
li.about {
float: right;
font-size: 30px;
width: 110px;
}
li.contact {
float: right;
font-size: 30px;
width: 130px;
}
Website: http://andrewgu12.kodingen.com/
Any help would be appreciated, thanks!
cahnge float:right; to float:left
li.portfolio {
float: left;
font-size: 30px;
width: 140px;
}
li.about {
float: left;
font-size: 30px;
width: 110px;
}
li.contact {
float: left;
font-size: 30px;
width: 130px;
}
and add float:right to ul
div#header ul{float:right;}
This is happening because the first list item floats to the right border. The second list item doesn't gets the space between the first item and the right border, and hence comes before the first item and so on.
In order to overcome this problem, as the best practice is to float the ul to the right, and li to the left. This will resolve the problem.
Always remember if you put 'float' in it will reverse the order of the menu, so write float value in tag or to main it's the arrangement as default.