I'm trying to create a nav bar where the links are only separated by a small space on one line. When I try to implement this they go onto two lines with large spaces and can't seem to change this.
From your comments and the pictures you provided I think this is what you are looking for.
/* Reset Browser Default Styles
-------------------------------------- */
* { margin:0; padding:0 }
/* General Styles
-------------------------------------- */
body {
font: 12px/1.2 Verdana, serif;
}
header {
background: #5D2C2C;
padding: 10px;
/* lay out content from right to left */
text-align: right;
}
a {
color: white;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Nav Styles
-------------------------------------- */
nav > * {
display: inline-block;
/* nav text should be left to right */
text-align: left;
}
nav menu {
/* dropdown menus need to be on top of page content */
position: absolute;
z-index: 1;
/* make them look nice */
padding: 10px;
background: #5D2C2C;
}
/* Show/hide the dropdown menu */
nav menu a {
display: block;
}
nav a + menu {
display: none;
}
nav a:hover + menu,
nav a + menu:hover {
display: block;
}
<header>
<nav>
Introduction
History
National Flags
<span>
International Maritime Signal Flags
<menu>
Maritime Signal: Letters
Maritime Signal: Numbers
</menu>
</span>
</nav>
</header>
Editable demo: http://jsbin.com/xojomi/2
I'm trying to create a nav bar where the links are only separated by a small space on one line.
Don’t apply any CSS.
For example:
Link1
Link2
Link3
Link4
Related
This is my first website and I'm creating a D&D character randomizer. I'm creating a Nav-bar and I'm trying to have each of the four bars fit across the screen equally (no matter screen size). I was hoping someone would be able to tell me what to add and take out of my existing code. I've included all the CSS and HTML needed to reproduce my issue. Thanks again.
/* CSS for the Menu */
#Menu {
font-size: 25px; /* Font size of 25 px */
}
/* CSS for the Menu background */
#Menu ul {
list-style-type: none; /* No Bullets */
overflow: hidden; /* No Scroll Wheel */
background-color: rgb(77, 39, 21); /* Background colour of the Menu */
margin-bottom: 0px; /* Margin from the top div is 0 */
margin-top: 0px; /* Margin from the top div is 0 */
padding: 0;
}
/* CSS for Menu Edges*/
#Menu li {
float: left; /* Menu is floated to the Left to make it all in one line */
border-right: 1px solid rgb(104, 99, 99); /* Left border line of 1 px separating blocks. */
border-left: 1px solid rgb(104, 99, 99); /* Right border line of 1 px separating blocks. */
}
/* CSS for Menu Tabs */
#Menu li a {
display: block; /* Turns it into a block display */
color: rgb(187, 180, 180); /* Background colour of Text */
text-align: center; /* Aligns text to the middle of the block */
padding: 16px 177px; /* Padding of 16px and 177 px between blocks */
text-decoration: none; /* Makes sure there are no underlines */
}
<link rel="stylesheet" type="text/css" href= "StylesheetQ.css">
<div id="Menu">
<ul>
<li><a class="active" href="Main Page.html">Home</li></a></li>
<li>About</li></li>
<li>Contacts</li></li>
<li>Testimonials</li></li>
</ul>
</div>
This code should do what you need.
It uses Flexbox, which you can read more about here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
We just added display: flex to the ul element, and flex: 1 to the lis.
flex: 1 is a shorthand for flex-grow: 1 and means: the remaining space in the
container will be distributed equally to all children.
float isn't needed anymore with flexbox, and so is the large horizontal padding of the a elements.
/* CSS for the Menu */
#Menu {
font-size: 25px; /* Font size of 25 px */
}
/* CSS for the Menu background */
#Menu ul {
list-style-type: none; /* No Bullets */
overflow: hidden; /* No Scroll Wheel */
background-color: rgb(77, 39, 21); /* Background colour of the Menu */
margin-bottom: 0; /* Margin from the top div is 0 */
margin-top: 0; /* Margin from the top div is 0 */
padding: 0;
display: flex; /* Add flexbox to list */
}
/* CSS for Menu Edges*/
#Menu li {
border-right: 1px solid rgb(104, 99, 99); /* Left border line of 1 px separating blocks. */
border-left: 1px solid rgb(104, 99, 99); /* Right border line of 1 px separating blocks. */
flex: 1 /* With flexbox we don't need float anymore */
}
/* CSS for Menu Tabs */
#Menu li a {
display: block; /* Turns it into a block display */
color: rgb(187, 180, 180); /* Background colour of Text */
text-align: center; /* Aligns text to the middle of the block */
padding: 16px; /* Remove large horizontal padding */
text-decoration: none; /* Makes sure there are no underlines */
}
<link rel="stylesheet" type="text/css" href= "StylesheetQ.css">
<div id="Menu">
<ul>
<li><a class="active" href="Main Page.html">Home</li></a></li>
<li>About</li></li>
<li>Contacts</li></li>
<li>Testimonials</li></li>
</ul>
</div>
I hope the code below helps. I've commented on the places I made adjustments but I also provided you a cleaner version of your code so you can see what it could look like.
Also, consider maybe using CSS Grid as that may help reduce the code redundancy.
HTML/CSS Style
*{
margin:0;
padding:0;
box-sizing:border-box;
}
#Menu {
width:100%;
}
#Menu ul {
font-size: 100%;
list-style-type: none;
}
#Menu li {
display: inline-block;
width: calc(100%/4);
text-align: center;
padding: 16px 0px;
float: left;
border-right: 1px solid rgb(104, 99, 99);
background-color: rgb(77, 39, 21);
}
#Menu li:nth-child(1){
border-left: 5px solid red;
}
#Menu a {
color: rgb(187, 180, 180);
text-decoration: none;
font-size: 100%;
}
<!--end snippet-->
<!-- begin snippet: js hide: false console: true babel: false -->
<link rel="stylesheet" type="text/css" href= "StylesheetQ.css">
<div id="Menu">
<ul>
<li><a class="active" href="Main Page.html">Home</li></a></li>
<li>About</li></li>
<li>Contacts</li></li>
<li>Testimonials</li></li>
</ul>
</div>
HTML/CSS - With Comments
*{
margin:0; /* zero-out MARGINS and PADDING */
padding:0;
box-sizing:border-box; /* helps keep dimensions of any block elements when they resize */
}
#Menu {
/* don't target the Menu as a whole
unless you want ALL the children to
have the same traits you intend for
your menu items (e.g. if you want menu
items to be 25px as well as P elements
throughout the contents of the div)*/
width:100%; /* assuming you want it to expand the entire width of the window*/
/* width:800px; <------ use this method if you want a FIXED size */
}
/* CSS for the Menu background */
#Menu ul {
font-size: 100%; /* Font size of 25 px */
list-style-type: none;
}
/* CSS for Menu Edges*/
#Menu li {
display: inline-block; /*INLINE-BLOCK (otherwise each list item takes up the whole line)*/
width: calc(100%/4); /* 100% width DIVIDED by No. of Elements (list items) */
text-align: center;
float: left; /* Menu is floated to the Left to make it all in one line */
border-right: 1px solid rgb(104, 99, 99); /* right border of ALL OTHER menu items. */
background-color: rgb(77, 39, 21);
padding: 16px 0px; /* the padding is added to each INLINE-BLOCK element (each list item) rather than the anchor (link)*/
}
#Menu li:nth-child(1){ /* left border of FIRST menu item. */
border-left: 5px solid red; /*made it RED so you could see how it works. ALSO because of BOX-SIZING: border-box, the border grows INWARDS rather than make the element larger*/
}
#Menu a {
color: rgb(187, 180, 180); /* Background colour of Text */
text-decoration: none; /* Makes sure there are no underlines */
font-size: 100%;
}
<link rel="stylesheet" type="text/css" href= "StylesheetQ.css">
<div id="Menu">
<ul>
<li><a class="active" href="Main Page.html">Home</li></a></li>
<li>About</li></li>
<li>Contacts</li></li>
<li>Testimonials</li></li>
</ul>
</div>
I am following a guide from w3schools to build a responsive top navigation bar for my site: How TO - Responsive Top Navigation
However, I would like the navigation items to be centered on the page, not aligned to the left or right. w3schools even has a second tutorial on a center navigation element link, but as soon as I try to use this code for several navigation elements, they either are all within each other or stack on top of each other!
Even more to my dismay, there has been a question about this exact problem before (here), but it seems the code of the example has been changed a lot in the meanwhile so that the answer is no longer applicable. :(
To center the top navigation in the link you've provided, you would add the following to .topnav:
.topnav {
…
display: flex;
justify-content: center;
}
To address the mobile menu (and not center it), add the following to your #media query:
#media screen and (max-width: 600px) {
…
.topnav { display: block; }
}
Before
After
One way is to wrap the links inside a div (say, a div with class nav-links), and then applying to the div:
.nav-links {
width: fit-content; /* 'margin: auto' alone does not work if the div takes full width */
margin: auto;
}
Below is a demo based on the tutorial you linked:
.nav-links {
width: fit-content;
margin:auto;
}
/*////////////// W3Schools CSS code //////////////*/
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
<div class="nav-links">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
So I am trying to make a pure CSS3 dropdown navigation. Of all the stack overflow questions about this, this was the closest I found.
What I dislike, however, is the use of defined heights, which makes everything a pain to refactor if you wish to change the heights later on.
Below is my own attempt, which uses barely any css and gets close to the desire result. The only issues with it is:
the "drop down" is more of a shove up and
if the first point is fixed, it would look bad in a header (as the entire header would jump about)
How can I fix these issues with minimal CSS and in a way that is dynamic and flexible (e.g. no absolute positionings, no fixed heights, etc)
/* all the CSS needed to make the drop down*/
/* set horizontal navigation for list elements*/
nav ul li {
display: inline-block;
}
/*remove padding from nested unordered list to get text to align*/
li > ul {
padding: 0;
}
/* hide nested list elements*/
li > ul li{
display: none;
padding: 0;
}
/* when hovering on the outer list element display nested list elements */
li:hover ul li{
display: block;
}
/* the following is added just to make the links clear to see*/
/*make text eady to see on dark background*/
li {
border: 1px coral solid
}
/*highlight the issue with the header bouncing*/
nav {
background-color: black;
color: coral;
}
<nav>
<ul>
<li><a>Link</a></li>
<li>
<a>Drop Down</a>
<ul>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
</ul>
</li>
</ul>
</nav>
How is this, just added absolute positioning to the child ul - using absolute positioning doesn't make it any less responsive
/* all the CSS needed to make the drop down*/
/* set horizontal navigation for list elements*/
nav ul li {
display: inline-block;
position:relative;
}
/*remove padding from nested unordered list to get text to align*/
li>ul {
padding: 0;
position:absolute;
width:100%;
background: black; /* not sure if you want background-color on this */
}
/* hide nested list elements*/
li>ul li {
display: none;
padding: 0;
}
/* when hovering on the outer list element display nested list elements */
li:hover ul li {
display: block;
}
/* the following is added just to make the links clear to see*/
/*make text eady to see on dark background*/
li {
border: 1px coral solid
}
/*highlight the issue with the header bouncing*/
nav {
background-color: black;
color: coral;
}
<nav>
<ul>
<li><a>Link</a></li>
<li>
<a>Drop Down</a>
<ul>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
</ul>
</li>
</ul>
</nav>
Use absolute position to style the dropdown.So the height issue will be fixed.Also don't forgot to add position:relative to the parent li tags.So the dropdown will position relative to the li tags
/* all the CSS needed to make the drop down*/
/* set horizontal navigation for list elements*/
nav ul li {
display: inline-block;
position:relative;
}
/*remove padding from nested unordered list to get text to align*/
li > ul {
padding: 0;
}
/* hide nested list elements*/
li > ul li{
display: none;
padding: 0;
}
/* when hovering on the outer list element display nested list elements */
li:hover ul li{
display: block;
}
/* the following is added just to make the links clear to see*/
/*make text eady to see on dark background*/
li {
border: 1px coral solid
}
/*highlight the issue with the header bouncing*/
nav {
background-color: black;
color: coral;
}
.dropdown{
position:absolute;
z-index:999;
width:100%;
}
<nav>
<ul>
<li><a>Link</a></li>
<li>
<a>Drop Down</a>
<ul class="dropdown">
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
</ul>
</li>
</ul>
</nav>
I already tried "width: 100%;" but the dropdown element then gets the same width as the whole page. I'm working with floats so maybe that needs a different approach?
I swear I've looked at similar questions but none of the solutions there worked for me. Can anyone see what I'm doing wrong? You can find the jsfiddle with all of the code here. I currently "solved" the problem with a fixed width.
Here is the HTML for the navi:
<nav role="navigation" class="navi">
<ul class="nav-elements">
<li>Home</li>
<li>Ongoing Stories
<ul>
<li>Sublink</li>
<li>Another Sublink with a long text</li>
</ul>
</li>
<li>Sleeping Stories
<ul>
<li>Sublink</li>
<li>Another Sublink</li>
</ul>
</li>
<li>News</li>
<li>About/FAQ</li>
</ul>
</nav>
And the CSS:
.navi {
float: left;
margin-bottom: 0.5em;
}
.navi ul {
padding-left: 0; /* Navi aligned left */
margin: 0;
}
.navi li {
background: #808080;
float: left;
padding: 0.2em 0.8em 0.2em 0.8em;
border: 1px solid black;
margin: 0 0.4em 0.4em 0;
list-style: none;
font-size: 1.2em;
border-radius: 10px;
}
/* nav-elements for dropdown-menus */
.nav-elements ul {
margin-top: 0.2em;
padding: 7px 10px 0 0;
}
.nav-elements li ul {
position: absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
z-index: 1000;
width: 9.25em;
margin-left: -0.85em; /* to counter the padding in .navi li */
}
.nav-elements li:focus,
.nav-elements li:hover { /* main navi gets shadow while dropdown is active */
text-shadow: 0 0 7px rgba(255,255,255,.5); /* kind of a glow effect */
}
.nav-elements li:focus ul, /* show the submenu when user focues (e.g. via tab) the parent li [doesn't work?]*/
.nav-elements li:hover ul { /* show the submenu when user hovers over the parent li */
left:auto; /* Bring back on-screen when needed */
text-shadow: none; /* dropdown doesn't inherit shadow from main-navi*/
}
.nav-elements ul li {
float: none;
font-size: .9em;
}
According to your issue that you don't want to use fixed width then please check my Updted fiddle
I have used width:100% so it will change according to parent ul. What you need is to change width:100% and position:relative or parent li(.navi li) and then i removed margin-right as it was extra and you got the result.
Updated
As i have used position:relative so width:100 is taking width inside the border so you are missing 2px gap so just for workaround i have used width:101%. Please check my updated fiddle.
let me know if its what you need. Thank you :)
your second ul element can just be wide as the li element around it. try this:
#subMenuFoo {
display: none;
}
#foo:hover ~ #subMenuFoo {
display: block;
}
<div class="nav-elements">
foo
<div id="subMenuFoo">
bar
</div>
</div>
--
please mind the gap
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm trying to format a navigation and its drop down in HTML and CSS.
DEMO
I have two problems.
First, on the right of the navigation there is space. But it should go all to the right like on the left side.
Second, I can't get the drop down items to fit below each other.
Could u tell me where the problems of the right space and the drop down items are?
/* Navi*/
nav ul {
margin-top: 0;
background-color: #FFF;
list-style: none;
padding: 0;
margin-left:0;
}
nav ul li {
display: block;
float:left;
background-color: #1C1C1C;
width: 33%;
text-align:center;
}
nav a {
display: list-item;
color: #FFF;
font-size: 23px;
line-height: auto;
text-decoration: none;
letter-spacing: 4px;
}
/* Dropdowns verstecken */
nav ul ul {
display: none;
position:fixed;
}
/* DropDowns */
nav ul ul li {
width: auto;
display: block;
float:left;
/*Üposition:relative;*/
padding-left:0;
margin-left:0;
}
/* DropDowns anzeigen */
nav ul li:hover > ul {
display: inherit;
}
/* Highliting wenn angezeigt */
nav a:hover {
background-color: #000000;
border-bottom: solid;
border-bottom-color: #8E96C0;
}
#kopfzeile {
position: fixed;
width: 1000px;
height: 60px;
background-color: #fa8072;
font-family: Quicksand;
opacity: 0.95;
margin:auto;
}
a {
color: #FFF;
}
<div id="kopfzeile">
<nav>
<ul>
<li>| HTML+ |
<!-- Erstes Drop Down -->
<ul>
<li>Was ist HTML?
</li>
<li>Befehlsübersicht
</li>
<li>Beispiele
</li>
</ul>
</li>
<li>| CSS+ |
<!-- Zweites Drop Down -->
<ul>
<li>Was ist CSS?
</li>
<li>Befehlsübersicht
</li>
<li>Beispiele
</li>
</ul>
</li>
<li>| PHP+ |
<!-- Drittes Drop Down -->
<ul>
<li>Was ist PHP
</li>
<li>Befehlsübersicht
</li>
<li>Beispiele
</li>
</ul>
</li>
</ul>
</nav>
</div>
Have a nice day,
Olker
There are several changes you need to make this happen.
Note: Before staring i guess you might have body{margin:0px;}. If not add it, but only if you want nav bar to leave no space.
1) Giving(adding) your nav width:100%; & margin:0px;. Along with the reason that your nav does not touches the right side is you need to give width:100%; to your #kopfzeile.
nav {
margin:0px;
width:100%;
}
#kopfzeile {
width: 100%; /* CHANGED */
}
2) Now remove float:left; by giving float:none; to your nav ul ul li{...}, to make them stack vertically. Along with that if you want text on left side also add left-align:left;
nav ul ul li
{
float:none;
text-align:left; /* Only if you want text left aligned*/
}
Updated Below:
3) For finishing to the li width's. You have width:33%; which is not actual dividing the 100% So you need to make it width:33.33%;
nav ul li {
display: block;
float:left;
background-color: #1C1C1C;
width: 33.33%; /* JUST CHANGED THIS ONE */
text-align:center;
}
JsFiddle : Updated