I have a problem with centering my nav menu. I want to my logo be perfectly centered on website and links to be around it inline. When I center my whole menu, indeed it's centered, but my image isn't in the center of a website.
Is there a solution to center my navigation menu by the logo?
<header>
<div class="nav-desktop">
<nav>
<ul>
<li>Services</li>
<li>Portfolio</li>
<li><img src="https://images82.fotosik.pl/410/7d70ec9229c54fe2.png"></li>
<li>Awards</li>
<li>Team</li>
</ul>
</nav>
</div>
</header>
header
{
background: #3f3f3f;
}
.nav-desktop
{
width: 100%;
position: relative;
padding-top: 30px;
}
.nav-desktop ul
{
list-style-type: none;
display: inline-block;
}
.nav-desktop ul li
{
display: inline-block;
}
.nav-desktop ul li img
{
vertical-align: middle;
}
And here's my jsfiddle https://jsfiddle.net/brq8f7nz/1/
Thanks for help!
The best way I know of achieving this is to set the same width attribute to all your <li> elements, except the one holding the image:
<li class="menuli">Services</li>
<li class="menuli">Portfolio</li>
<li><img src="....."></li>
<li class="menuli">Awards</li>
<li class="menuli">Team</li>
in the CSS:
.menuli
{
width:300px;
text-align:center;
}
only add nav style and remove padding-top: 30px; in .nav-desktop class
nav{
text-align:center;
}
Revise Fiddle
header {
background: #3f3f3f;
}
nav {
text-align: center;
}
.nav-desktop {
width: 100%;
position: relative;
}
.nav-desktop ul {
list-style-type: none;
display: inline-block;
}
.nav-desktop ul li {
display: inline-block;
}
.nav-desktop ul li img {
vertical-align: middle;
}
<header>
<div class="nav-desktop">
<nav>
<ul>
<li>Services</li>
<li>Portfolio</li>
<li><img src="https://images82.fotosik.pl/410/7d70ec9229c54fe2.png"></li>
<li>Awards</li>
<li>Team</li>
</ul>
</nav>
</div>
</header>
I got it... my ul just got left padding and it was a reason why my logo wasn't in the center but more to the right.
Thanks guys!
Related
I have created a menu bar which I tried to make beautiful and align the text right but the a tag overlaps the previous one what I've tried is prioritize one selector over another one. with z-index.
So basically I want the nav bar to look like my website but I want the buttons to be clickable and not overlapping each other for the website.
If you check an early build of my website on Desktop I think you can understand my problem better due to my horrible English writing skills.
Website
and some code
nav ul {
position: inherit;
width: auto;
background: none;
height: auto;
display: flex;
padding-top: 0;
}
nav ul li {
float: left;
align-items: right;
}
nav ul li a {
color: black;
background-color: inherit;
padding: 1em 2em;
text-align: right;
width: 100%;
margin: 0;
}
nav ul li a:hover {
background-color: inherit;
position: absolute;
}
<ul class="ShowDesk HideDesk menull" id="nav">
<li id="exit" class="exit-btn HideDesk"><img src="../images/cancel-button.svg" alt="toggle menu"></li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Login</li>
</ul>
Replace this:
<ul class="ShowDesk HideDesk menull" id="nav">
<li id="exit" class="exit-btn HideDesk"><img src="../images/cancel-button.svg" alt="toggle menu"></li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Login</li>
</ul>
by:
<ul class="ShowDesk HideDesk menull" id="nav">
<li id="exit" class="exit-btn HideDesk"><img src="../images/cancel-button.svg" alt="toggle menu"></li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Login</li>
</ul>
Basically what you need to do is to wrap the li tag or div tag whatsoever inside the anchor tag. By doing this the clickable buttons will automatically take the right position.
Hope you'll find this useful.
If I understood you well, you want to make it like this:
HTML
<body>
<nav>
Home
About
Contact
Login
</nav>
<div class="">
Rest of website
</div>
CSS
nav{
text-align: right;
}
nav a{
margin: 0 2%;
text-decoration: none;
color: black;
}
I'd be happy if it's helpful.
What I eventually did was put out the header section into a different container named navbar-container So I could style the navbar separately from the other containers. Making the width bigger without interfering with the other code. (I dont know in anyway if this is an correct way to code.) And I styled the navbar:
.navbar-container {
text-align: center;
padding: 0.8em 1.2em;
}
/* and removing the width: 100% from here; */
}
nav ul {
position: inherit;
width: auto;
background: none;
height: auto;
display: flex;
padding-top: 0;
}
nav ul li {
float: left;
align-items: right;
}
nav ul li a{
color: black;
background-color: inherit;
padding: 1em 2em;
text-align: right;
margin: 0;
}
nav ul li a:hover {
color: black;
background-color: inherit;
}
I am trying to create a navigation menu with 6 items, 3 on the left, 3 on the right with the logo (the logo to be both vertically and horizontally centered)
The problem I am having is the logo looks centered, but not vertically. Also the navigation items are too far apart from the logo and the my navigation items on the right are not in the correct order.
What I am trying to accomplish is to make it look like the screenshots attached.
https://jsfiddle.net/fa970mnm/2/
.site-footer ul {
list-style: none;
}
.site-footer ul li a {
color: #e1c66b;
}
#logo {
height: 125px;
}
.nav {
text-align: center;
}
.nav li {
display: inline;
margin-right: 1em;
}
#media(min-width:786px) {
.nav li:nth-child(1),
.nav li:nth-child(2),
li:nth-child(3) {
float: left;
}
.nav li:nth-child(4),
.nav li:nth-child(5),
li:nth-child(6) {
float: right;
}
}
<div style="text-align:center;">
<img id="logo" src="http://www.jamaicacannabisestates.com/wp-content/uploads/2018/03/logo.png" />
<ul class="nav">
<li>Home</li>
<li>Shop</li>
<li>Our Story</li>
<li>Products</li>
<li>Contact Us</li>
<li>Foundation</li>
</ul>
</div>
You would probably be best suited using a flexbox in this situation. You can simply use the following rules for your container <div>.
#banner {
display: flex;
justify-content: center;
align-items: center;
}
And you can mess with the margin-right rule for the .element class I added to change the amount of spacing, or maybe take a look at justify-content: space-between from the link above.
Here's the JSFiddle.
Why do not you just put the logo between LI?
Just move the logo and improve CSS:
.nav li {
display: inline-block;
vertical-align: middle;
margin-right: 1em;
}
Display as 'Inline-block', because 'vertical-align middle' doesnt work with 'inline'.
https://jsfiddle.net/fa970mnm/14/
First move your logo to .nav as a child.
Then change .nav li inline to display: inline-block;.
Like this
.nav li {
display: inline-block;
margin-right: 1em;
}
Here is the working Snippet
.site-footer ul {
list-style: none;
}
.site-footer ul li a {
color: #e1c66b;
}
#logo {
height: 125px;
}
.nav {
text-align: center;
vertical-align: middle;
}
.nav li {
display: inline-block;
margin-right: 1em;
vertical-align: middle;
}
<div style="text-align:center;">
<ul class="nav">
<li>Home</li>
<li>Shop</li>
<li>Our Story</li>
<li>
<img id="logo" src="http://www.jamaicacannabisestates.com/wp-content/uploads/2018/03/logo.png" />
</li>
<li>Products</li>
<li>Contact Us</li>
<li>Foundation</li>
</ul>
</div>
I am trying to make a navigation menu for a simple html/css site, it uses blocks and unorganized lists to add items to the navigation.
The problem is that I want my navigation to be centered, right now it floats from left to right, is there another way of aligning the listed div other than making it float right? I tried using left:20; but didn't work, here is the code.
As I say, just need that to center slightly to the right, I am making it float to the left so that it organizes the list properly, without it, it'd be a messy list, try it and you'll see what I mean... Thanks for help! :D
body {
font-family: Arial;
}
#nav { /*indexed so I can see it over a content div.*/
z-index:0;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 8%;
height: 40px;
background-color: #000000;
opacity: 0.8;
line-height: 40px;
text-align: center;
font-size: 90%;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li{
display: none;
}
ul li:hover ul li {
display: block;
margin-left: 0%;
width: 100%;
background-color: #000000;
}
<div id="nav">
<ul>
<li>Attractions
<ul>
<li>Our Team</li>
<li>Camp Sites</li>
<li>Mission & Vision</li>
<li>Resources</li>
</ul>
</li>
<li>Plan Visit
<ul>
<li>Activities</li>
<li>Parks</li>
<li>Shops</li>
<li>Events</li>
</ul>
</li>
<li>Birthdays
<ul>
<li>Map</li>
<li>Directions</li>
</ul>
</li>
</ul>
</div>
This, I think, gives the nicest result:
#nav {
left:40%
position:relative;
}
When using float, be careful using it without a clearfix hack. A float could end up collapsing your entire site. Link for it here, also an explanation: https://www.w3schools.com/howto/howto_css_clearfix.asp
so my issue is that my navbar wont display in the center of the screen (horizontally) and I dont understand why, this is something I have regular issues with so if you could help it would be greatly appreciated. Heres a link to the code
body {
width: 100%;
margin: 0;
padding: 0;
}
/*******************
HEADER
*******************/
#logo {
display: block;
margin: 0 auto;
height: 14em;
}
#name {
text-align: center;
}
/*******************
NAV BAR
*******************/
nav ul {
list-style-type: none;
overflow: hidden;
text-align: center;
}
nav li {
float: left;
display: inline-block;
}
nav li a {
display: block;
text-align: center;
text-decoration: none;
}
<body>
<header>
<img id="logo" src="img/under-construction.png" />
<h1 id="name">Team Kangoo Anywhere</h1>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>About The Rally</li>
<li>Our Car</li>
<li>Charities</li>
<li>Sponsors</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
Ideally you should have some header css to center it's contents, then you could align the nav li s any which way you want. I created a fiddle (same as snippet) to demonstrate, and added padding to the li elements (or else they'd have been all squished together)
Hope this helps.
body {
width: 100%;
margin: 0;
padding: 0;
}
/*******************
HEADER
*******************/
header {
display: block;
margin: 0 auto max-height: 20em;
}
#logo {
display: block;
margin:auto;
height: 14em;
}
#name {
text-align: center;
}
/*******************
NAV BAR
*******************/
/*nav{text-align:center;}*/
nav ul {
list-style-type: none;
overflow: hidden;
text-align: center;
}
nav li {
float: left;
display: inline-block;
padding-right: 7px;
}
nav li a {
display: block;
text-align: center;
text-decoration: none;
}
<header>
<img id="logo" src="img/under-construction.png" />
<h1 id="name">Team Kangoo Anywhere</h1>
<nav>
<ul>
<li>
Home</li>
<li>
About Us</li>
<li>
About The Rally</li>
<li>
Our Car</li>
<li>
Charities</li>
<li>
Sponsors</li>
<li>
Contact Us</li>
</ul>
</nav>
</header>
Change
nav li {
float: left;
display: inline-block;
}
to
nav li {
// Remove float
display: inline-block;
}
Add a wrapper to the nav using a div tag, make the nav display inline and use text-align on the div.
<div style="text-align:center"><nav style="display:inline-block">
... and then google Bootstrap
After removing the float: left you can use display: flex for <ul> or display: inline for it's children <li>s.
And you have an unwanted left padding in the <ul> that it is better to remove it to make real center.
ul { margin: 0; padding: 0; }
You can have a look at this post.
The following is my HTML and CSS. The I'm expecting a nav bar with background color 4d4030 but not background is rendered. Anyone have nay ideas? Thanks!!
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Clients</li>
</ul>
</div>
#nav {
background-color: #4d4030;
}
#nav ul{
padding: 0;
float: left;
}
#nav ul li{
display: inline;
}
#nav ul li a{
float: left; text-decoration: none;
color: #FFFFFF;
padding-left: 25px;
padding-right: 25px;
font-size: 18px;
display: block;
border-right: 1px #FFFFFF;
}
this will solve your issue
#nav {
background-color: #4d4030;
overflow:hidden;
}
demo http://jsfiddle.net/gaby/Gb22V/
That's because you float the only child for the nav element which is the ul element. This makes the height of the nav element equal to 0. Clear your float by adding an overflow: hidden declaration (or using any other method to clear floats) to nav and it will work.
#nav {
background-color: #4d4030;
overflow: hidden;
}
See fiddle.
HTML
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Clients</li>
</ul>
<div class="clear"></div>
</div>
CSS
.clear
{
clear: both;
}