I am trying to align the navigation bar to the left of the container which is 950px wide, but it's still showing the margin on the left side. How do I align it to the left completely without specifying the left margin in negative?
JSFiddle
HTML5 code
<div class="nav-holder">
<nav class="container">
<ul>
<li class="active">Home</li>
<li>Features</li>
<li>Programs</li>
<li>Marketing tools</li>
<li>About Us</li>
<li>Faq</li>
<li>Contact us</li>
<li>Sign Up</li>
</ul>
</nav>
</div><!-- nav holder -->
CSS
body{margin:0}
ul {
list-style: none;
}
.container {
width: 950px;
margin: 0 auto;
}
.nav-holder {
overflow: hidden;
background: url('images/nav-bg.jpg') repeat-x;
}
.nav-holder nav {
overflow: hidden;
margin-top: -3px;
margin-bottom: 12px;
}
.nav-holder li {
float: left;
}
.nav-holder li a {
display: block;
text-decoration: none;
color: #ff0202;
padding: 4px 23px;
text-transform: uppercase;
font-size: 14px;
text-shadow: 1px 1px 1px #FFF;
}
.nav-holder li a:hover,.nav-holder li.active a {
background: rgba(162, 162, 162, 0.7);
}
If I am not wrong, all lists (ul and ol) have default indents associated with them. Try adding a padding: 0; to your CSS rule for ul like below.
ul {
padding: 0;
list-style: none;
}
Use padding-left
http://jsfiddle.net/fDJA8/4/
ul {
padding-left : 0px;
}
Related
I have menu bar which need to be margin-top: 150px;
But visually in Firefox looking different as on Chrome.
Header code: https://codepen.io/bugerman21/pen/rNxvyOv
Chrome:
Correct display
Firefox:
Incorrect display
HTML:
<nav>
<ul class="nav">
<li class="category"><span>Category <i class="fas fa-sort-down"></i></span>
<ul>
<li>Qwerty 1</li>
<li>Qwerty 2</li>
<li>Qwerty 3</li>
<li>Qwerty 4</li>
</ul>
</li>
<li>Cuntact us</li>
<li>FAQ</li>
</ul>
CSS:
* {
margin: 0;
pading: 0;
}
.nav li ul {
position: absolute;
margin-top: 150px;
min-width: 150px;
list-style-type: none;
display: none;
}
How to do margin-top only for the Firefox browser?
Unsuccessful attempt:
#-moz-document url-prefix() {
.nav li ul {
margin-top: 150px;
}
}
Here ya go buddy, sorry I left for the day yesterday but see the changes made and I left outlines on the elements to give a better visual reference. As it is now it will display as expected on all browsers even old internet explorer. Although you could accomplish the same thing cleaner overall, this at least gets you back on track. Cheers and welcome to StackOverflow! :)
PS : since the nav menu items don't have a fixed height you might want to consider making that something static so you can change the top: 56px to a value that places the drop down consistently no matter the width of the screen. If you make the example full screen you'll see what I mean.
header {
display: flex;
margin: 0;
padding: 0 20px;
justify-content: space-between;
align-items: center;
background-color: silver;
}
.header {
grid-area: header;
background-color: #1f1f1f;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
/*---------- Logo ----------*/
.logo {
font-family: 'Gentium Book Basic', serif;
font-size: 2.5em;
color: #808080;
}
/*---------- Nav menu ----------*/
.nav {
list-style-type: none;
display: flex;
justify-content: flex-start;
margin: 0;
}
.nav > li {
text-decoration: none;
font-family: 'Roboto', sans-serif;
color: #ffffff;
transition: background-color .25s ease;
}
.nav a {
display: block;
padding: 20px;
color: #ffffff;
font-size: 1em;
}
.category {
padding: 0 20px;
display: flex;
align-items: center;
position: relative;
overflow: visible;
border: red 1px solid;
}
/*---------- Sub menu ----------*/
.nav li ul {
position: absolute;
top: 56px;
left: 0;
min-width: 150px;
margin: 0;
padding: 0;
list-style-type: none;
display: none;
border: green 1px solid;
}
.nav li > ul li {
border-bottom: 1px solid #ffffff;
background-color: #1f1f1f;
}
.nav li > ul li a {
text-transform: none;
}
.nav li:hover > ul {
display: block;
}
.nav > li:hover {
background-color: #404040;
/* box-shadow: -5px 5px #1f1f1f; */
}
.nav li ul > li:hover {
background-color: #404040;
}
/*---------- Search & Profile----------*/
.search_and_profile {
display: flex;
align-items: center;
}
.search_and_profile > p {
margin: 0;
color: #ffffff;
}
.search-container button {
float: right;
padding: 6px 10px;
background: #e0e0e0;
font-size: 17px;
border: none;
cursor: pointer;
}
.search-container input[type=text] {
padding: 6px;
font-size: 17px;
border: none;
}
<header class="header">
<span class="logo">Qwerty</span>
<nav>
<ul class="nav">
<li class="category"><span>Category <i class="fas fa-sort-down"></i></span>
<ul>
<li><a href=#>Qwerty 1</a></li>
<li>Qwerty 2</li>
<li>Qwerty 3</li>
<li>Qwerty 4</li>
</ul>
</li>
<li>Cuntact us</li>
<li>FAQ</li>
</ul>
</nav><!-- .nav -->
<div class="search_and_profile">
<div class="search-container">
<form action="#">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div><!-- .search-container -->
</div><!-- .search_and_profile -->
</header>
It will work for me, additionally i included color too to make sure.
Also you try this option too
#media screen and (-moz-images-in-menus:0) {
/* your style */
}
* {
margin: 0;
pading: 0;
}
.nav li ul {
position: absolute;
margin-top: 150px;
min-width: 150px;
list-style-type: none;
display: none;
}
/* Added */
#-moz-document url-prefix('') {
.nav li ul {
margin-top: 150px;
color: orange;
}
}
<div class="nav">
<ul>
<li>Home</li>
<li>About
<ul>
<li>Some text</li>
<li>Some more text</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
Have tried a lot of different things but can not figure out why it won't center. Any help would be awesome!
nav {
font-size: 18px;
}
ul {
list-style-type: none;
display: inline-block;
}
li {
display: inline-block;
}
li a {
color: #F55F5F;
padding: 10px 15px;
text-decoration: none;
text-align: center;
}
<nav>
<ul>
<li>Home
</li>
<li>Services
<li>About Us
</li>
<li>Contact Us
</ul>
</nav>
You can do two things to center the ul:
Add text-align: center to the nav to center the ul inside it.
Reset the default left padding of ul
See demo below:
nav {
font-size: 18px;
text-align: center;
}
ul {
padding: 0;
list-style-type: none;
display: inline-block;
}
li {
display: inline-block;
}
li a {
color: #F55F5F;
padding: 10px 15px;
text-decoration: none;
text-align: center;
}
<nav>
<ul>
<li>Home
</li>
<li>Services
<li>About Us
</li>
<li>Contact Us
</ul>
</nav>
nav{
text-align: center;
background: green;
}
ul{
padding: 0;
}
just put text align center to nav
nav {
text-align: center;
}
I'm having trouble getting the alignments right on a nav bar. I'm trying to figure out how to get the logo part to stay on the left of the nav bar, but put the links on the right side. I've tried using float: right but I can't seem to get it to work on just the links. How can I do this?
https://jsfiddle.net/t46bcayd/1/
<nav>
<ul>
<li>Logo</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</nav>
Flexbox is perfect here...no need to change the structure, unless you want to.
body {
margin: 0;
padding: 0;
font-size: 15px;
}
nav {
background-color: black;
margin: 0;
overflow: hidden;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
}
nav ul li {
display: inline-block;
list-style-type: none;
}
nav ul li a {
color: white;
background-color: red;
display: block;
line-height: 3em;
padding: 1em 3em;
text-decoration: none;
}
nav ul li:first-child {
margin-right: auto;
}
nav ul li a.logo {
background-color: green;
}
nav ul li a:hover {
background-color: blue;
}
<nav>
<ul>
<li>Logo
</li>
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
</ul>
</nav>
If you remove the inline-block rule for the list items you can float the first one left and the others right:
li {
float: right;
}
li:first-child {
float: left;
}
jsFiddle example
You'd also need to re-order the list items that are floated right to:
<li>Logo</li>
<li>Three</li>
<li>Two</li>
<li>One</li>
You could use flexbox for this.
<style>
nav{
display:flex;
justify-content: space-between;
align-items: center;
}
</style>
<nav>
Logo
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</nav>
Remember prefixes ... works in IE > 9
Use the float:left property
body {
margin: 0;
padding: 0;
font-size: 15px;
}
nav {
background-color: black;
margin: 0;
overflow: hidden;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li:not(:first-child) {
float: right;
}
nav ul li {
display: inline-block;
list-style-type: none;
}
nav ul li a {
color: white;
background-color: red;
display: block;
line-height: 3em;
padding: 1em 3em;
text-decoration: none;
}
nav ul li a.logo {
background-color: green;
}
nav ul li a:hover {
background-color: blue;
}
<nav>
<ul>
<li>Logo</li>
<li>Three</li>
<li>Two</li>
<li>One</li>
</ul>
</nav>
I did have to change the order so they showed up right
I am currently using floats in order to place my logo in the center of my fixed navigation menu. The issue I'm facing currently is that the items I've floated to the right are displaying in reverse order.
How do I use text-align to achieve desired result and still maintain a fixed navigation header?
current code:
<img src="img/logo.png" class="logo" />
<ul class="nav">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
</ul>
css:
header {
width: 100%;
padding: 0, 100px, 0, 0;
margin: 10px, 100px, 35px, 0 ;
position: fixed;
height: 6em;
background: transparent;
top: 0;
z-index: 1;
}
header .logo {
display: block;
height: 110px;
text-indent: -9999px;
width: auto;
margin: 0 auto;
position: relative;
}
header ul {
margin: -85px auto 0 auto;
height: 10px;
list-style: none;
}
header li:nth-child(1), header li:nth-child(2), header li:nth-child(3){
float: left;
}
header li:nth-child(4), header li:nth-child(5), header li:nth-child(6){
float: right;
}
Most obvious solution, break the menu into two and put the logo in the middle...then float each menu as required.
* {
margin: 0px;
padding: 0;
}
ul {
margin: 0;
list-style: none;
display: inline-block;
}
li {
display: inline-block;
}
a {
background: grey;
color: white;
padding: .5em;
}
nav {
text-align: center;
}
.left {
float: left;
text-align: left;
}
.right {
float: right;
text-align: right;
}
<nav>
<ul class="nav left">
<li>A
</li>
<li>B
</li>
<li>C
</li>
</ul>
Logo
<ul class="nav right">
<li>D
</li>
<li>E
</li>
<li>F
</li>
</ul>
</nav>
Of course, you may want all the items bunched together..in which case you don't need the floats at all
JSFiddle Demo
Then again, there's this one I like (not mine) which is even better : Codepen Demo
I've already checked the 10 or so posts that seem to be asking the same question, but without a lot of clarity.
I've created a Pure CSS Drop Down menu with five options. Two of these options (Options 2 and 3) contain their own submenus:
#topnav_frame {
color: rgba(245, 245, 245, 1);
font-size: 1.15em;
font-weight: bold;
background-color: rgba(85, 85, 85, 1);
}
#topnav {
min-width: 1200px;
max-width: 1200px;
margin: 0em auto;
overflow: auto;
zoom: 1;
font-size: .75em;
padding: 0px 10px;
}
#topnav ul.menu {
margin: 0;
padding: 0;
list-style-type: none;
z-index: 1000;
}
#topnav ul.menu li {
display: block;
float: left;
position: relative;
width: 160px;
}
#topnav ul.menu li a {
display: block;
text-decoration: none;
padding: 15px;
background-color: rgba(85, 85, 85, 1);
color: rgba(255, 255, 255, 1);
margin-left: 1px;
text-align: center;
}
#topnav ul.menu li.submenu ul.hidden li a {
padding: 15px;
width: 130px;
text-align: left;
}
#topnav ul.menu li.submenu ul.hidden {
position: absolute;
padding: 0;
margin: 0;
display: none;
}
#topnav ul.menu li.submenu:hover ul.hidden {
display: block;
z-index: 1000;
}
#topnav ul.menu li a:hover {
background-color: rgba(105, 105, 105, 1);
}
<div id="topnav_frame">
<div id="topnav">
<ul class="menu">
<li>Home
</li>
<li class="submenu">Option 1
<ul class="hidden">
<li>View Option 1
</li>
<li>Edit Option 1
</li>
</ul>
</li>
<li class="submenu">Option 2
<ul class="hidden">
<li>Current Option 2
</li>
<li>Option 2 History
</li>
</ul>
</li>
<li>Option 3
</li>
<li>Option 4
</li>
</ul>
</div>
</div>
The JS Fiddle can be viewed here.
The problem arises when I place the mouse over the li.submenu. The menu drops down, however the menu drops down "inside" of the div, as opposed to "outside" of the div. The topnav overflow is hidden, so the scrollbar becomes visible. I would like the submenus to pop "outside" if the div.
I've already changed the z-index to reflect this required change (z-index:0 for the topnav frames and z-index: 1000 for both the ul menu and the the submenu.
Any ideas?
That works as expected : you set overflow:auto on #topnav element. If you go hover option 2 or 3 and scroll down, .submenu appears.
Just remove it. You'll have to make a different clearfix.
#topnav {
min-width: 1200px;
max-width: 1200px;
margin: 0em auto;
/* overflow: auto; */
zoom: 1;
font-size: .75em;
padding: 0px 10px;
}
FYI, overflow:auto makes the inner element that are out of the container not visible, you have to scroll to see it. See : https://developer.mozilla.org/en-US/docs/Web/CSS/overflow