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;
}
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>
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
Bit new at CSS and been looking around at various sites and bits of code trying to get a centered drop down menu which I managed to get :).
However as soon as I added some images to make up the heading the menu shifted off to the left and I have not been able to budge it ever since, any help? Code is below.
<style type="text/css">
<!--
body {
background-image: url();
background-color: #0099FF;
}
.style1 {color: #FFCC00}
.style2 {color: #FF9900}
.style3 {
color: #FFCC00;
font-weight: bold;
font-size: 12px;
}
.style4 {
color: #000099;
font-weight: bold;
}
.style5 {color: #000099; font-weight: bold; font-size: 12px; }
.style6 {color: #000099}
* { padding: 0; margin: 0; }
body { padding: 5px; }
ul { list-style: none; margin: auto}
ul li { float: left; padding-right: 0px; position: relative; }
ul a { display: table-cell; vertical-align: middle; width: 100px; height: 50px; text-align: center; background-color: #0099EE; color: #000000; text-decoration: none; border: 1px solid #000000;}
ul a:hover { background-color: #0066FF; }
li > ul { display: none; position: absolute; left: 0; top: 100%; }
li:hover > ul { display: inline; }
li > ul li { padding: 0; padding-top: 0px; }
#menu-outer {
height: 84px;
background: url(images/bar-bg.jpg) repeat-x;
}
.table {
display: table;
margin: 0 auto;
}
ul#horizontal-list {
min-width: 696px;
list-style: none;
padding-top: 20px;
}
ul#horizontal-list li {
display:inline
}
-->
</style></head>
<body>
<div id="menu-outer"></div>
<div class="table"></div>
<div align="center"><img src="logo_with_words_3.jpg" width="172" height="145"><img src="heading.gif" width="557" height="69"><img src="logo_with_words_3.jpg" width="172" height="145">
</div>
<ul id="horizontal-list">
<li>
Home
</li>
<li>About Us
<ul>
<li>History</li>
<li>Guest Comments</li>
</ul>
<li>News</li>
<li>Accommodation
<ul>
<li>Rooms</li>
<li>Bedrooms</li>
<li>St Joseph's Annexe</li>
</ul>
<li>Visiting St Katharine's
<ul>
<li>Retreats</li>
<li>B&B</li>
<li>Events</li>
<li>Conferences</li>
<li>Catering</li>
</ul>
<li>Contact Us
<ul>
<li>Find Us</li>
</ul>
<li>Walled Garden</li>
<li>Sue Ryder Legacy
<ul>
<li>Sue Ryder</li>
<li>Prayer Fellowship</li>
<li>LRWMT</li>
</ul>
</ul>
</body>
You aren't really using a table, but you can add something like this: #horizontal-list {margin: auto; width: 850px;}
JS Fiddle with your code
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;
}
Take a look at this website I am working on: new.AudioManiacProductions.com
A screenshot from Dreamweaver showing the divs can be found here: new.AudioManiacProductions.com/images/stack.png
Notice how to navigation bar is not centered and the "home" has an intent on the left side.
I want the nav bar to stretch the whole span of it's parent container and be centered both vertically and horizontally.
Here's my CSS for the navigation section of the page, the nav list item, and the links.
#nav {
width: 100%;
height: 40px;
margin: 0 auto;
padding: 0px;
text-align: center;
color: #FFF;
list-style: none;
line-height: auto;
verticle-align: middle;
}
#nav li {
padding: 0px;
display: block;
width: 20%;
list-style-type: none;
float: left;
text-align: center;
overflow: hidden;
line-height: auto;
verticle-align: middle;
}
#nav li a {
font-size: 18px;
font-weight: 600px;
text-decoration: none;
font-weight:800;
color:#FFF;
}
#nav li a:hover, a:visited {
color: #00F;
}
And here is my HTML:
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Packages</li>
<li>Quote</li>
<li>Contact Us</li>
</ul>
</div>
Any help is greatly appreciated!
Browsers set padding-left by default on UL tags. Remove the padding and that should help out.
#nav ul {
padding-left: 0;
}
or just clear all padding:
#nav ul {
padding: 0;
}