Okay after a lot of googling I finally found out how to centre the menu links in the middle of the nav bar. After that I came across another problem...adding a logo in the navigation bar.
My problem is, the logo doesn't come into the navigation bar, it instead goes above the bar.
I would like to have the logo floating to the left in the nav bar.
I have tried a few things, including adding display: inline-block/inline to all the main elements, but no difference. Though I tried adding display: inline to the nav ul, but the background of the nav bar disappears (see second image) and I can't add a background via adding height and width.
P.s Excuse me If there are few amateur mistakes, I have only started to code a few months ago.
Thanks for your time!
How the nav bar looks now:
How the nav bar looks with display: inline;
Here is my HTML and CSS:
#logo {
height: 50px;
width: auto;
float: left;
}
nav ul {
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
background-color: #1a1a1a;
text-align: center;
border: 1px solid #e7e7e7;
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
padding: 16px 15px;
text-decoration: none;
font-family: arial;
font-weight: bold;
color: white;
}
nav a:hover {
background-color: orange;
color: white;
}
<nav>
<img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif"></img>
<ul>
<li>Game 1
</li>
<li>Game 2
</li>
<li>Game 3
</li>
</ul>
</nav>
Just insert it inside your ul.
#logo {
height: 50px;
width: auto;
float: left;
}
nav ul {
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
background-color: #1a1a1a;
text-align: center;
border: 1px solid #e7e7e7;
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
padding: 16px 15px;
text-decoration: none;
font-family: arial;
font-weight: bold;
color: white;
}
nav a:hover {
background-color: orange;
color: white;
}
<nav>
<ul>
<img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif"/>
<li>Game 1
</li>
<li>Game 2
</li>
<li>Game 3
</li>
</ul>
</nav>
The easiest way is to probably do a position:absolute
https://jsfiddle.net/fj1r6b1e/
#logo {
height: 50px;
width: auto;
position:absolute;
}
Also, img tag should be written like this <img src="..." /> instead of <img></img>
Give the logo img position: fixed. This will not affect the position/centering of the menu items.
https://jsfiddle.net/kjmm3du5/
Related
I am building a navbar with hover effects over the nav items and an inline button, however, the text in my button is not lining up with the other nav items. In addition I am having trouble figuring out how to get the red hover background to space itself evenly above and below the text of my nav items. What am I doing wrong?
<nav class="navbar">
<a id="header" href="#">Adopt <span class="me">Me</span> </a>
<ul >
<div id="rightitems">
<li>About Us</li>
<li>What we do</li>
<li>Benefits</li>
<li>Our Buddies</li>
<button class="btn">Contact Us</button>
</div>
</div>
</ul>
</nav>
.btn{
display: inline;
width: auto;
text-decoration: none;
margin: 0;
}
.btn a{
margin: 0;
}
body{
background-image: url(bulldog.jpg)
}
a{
text-decoration: none;
}
nav ul{
list-style-type: none;
margin: 0;
padding:0;
text-decoration: none;
display: flex;
position: relative;
}
nav a{
margin-right: 10px;
margin-left: 10px;
padding-top: 10px;
}
.navbar{
display: flex;
justify-content: space-between;
width: 100%;
}
#rightitems{
display: flex;
}
li{
width: auto;
}
li:hover{
width: auto;
}
li:hover {
background-color: #FF4850;
color: white;
border-radius: 10px;
}
nav li:hover{
color: white;
}
nav a:hover{
color: white;
}
Looks like some duplicate selectors and a bit of redundant styling. I've made some adjustments check out this fiddle:
nav a {
margin: 10px;
text-decoration: none;
}
nav a:not('me'):hover{
color: white;
}
.navbar #rightitems li{
padding: 10px 5px;
}
https://jsfiddle.net/cf2vd64y/2/
This is driving me insane, and I just can't figure out the cause. I have a JSP application that is connected to bootstrap. First of all, I am by no means an expert in CSS, and am green in that area. My issue is that inline-block just will not work. My bootstrap is used for the collapse plugin that allows me to use a menu button instead of the regular menu in smartphones.
When I use a desktop-size, the menu items are displayed in block format (vertical), even though I have used display: inline-block. Here's my code, and if anyone has an idea why inline-block is not working please let me know.
The html:
<ul id="menu-items" class="navbar-collapse collapse menubar-items">
<li>
<a class="menuItems" href="home.jsp">Home</a>
</li>
<li>
<a class="menuItems" href="business.jsp">Business</a>
</li>
<li>
<a class="menuItems" href="new-form.jsp">New Order</a>
</li>
<li>
<a class="menuItems" href="logout.do">Logout</a>
</li>
</ul>
The css:
#menu-items {
min-width: 250px;
background: #CFC3F8;
box-shadow: 5px 5px 2px #888888;
padding: 0;
float: right;
}
#menu-items li {
height: 100%;
width: 100%;
margin-right: 10px;
text-decoration: none;
vertical-align: middle;
text-align: center;
line-height: 60px;
font-size: 16px;
border-left: solid white 2px;
color: #332419;
//The attempt
display: inline-block;
}
#menu-items li a.menuItems {
height: 100%;
width: 100%;
}
#menu-items li a.menuItems:hover {
color: #332419;
background-color: #f1f1f1;
}
//ensuring that bootstrap doesn't override it
.navbar-collapse li {
display: inline-block;
text-decoration: none;
}
.collapse li {
display: inline-block;
text-decoration: none;
}
ul li {
display: inline-block;
text-decoration: none;
}
i am trying to make a responsive navigation bar with these 4 elements. however, if i drag the browserwindow to a certrain point it starts placing one of the 4 below the rest. but i dont know what i'm doing wrong.
The HTML:
<div id="nav">
<ul>
<li class="blue">Home</li>
<li class="blue">Trailer</li>
<li class="red">Gallery</li>
<li clas="red">Contact Us</li>
</ul>
</div>
The CSS:
#nav {
width: 100%;
background-color:transparant;
}
#nav ul {
width: 85%;
max-width: 1200px;
padding: 0;
margin: 0 auto;
list-style: none;
text-align: center;
}
#nav ul li {
display: inline-table;
width: 24%;
padding: 4px;
background-color:#242424;
border-radius: 5px;
}
#nav ul li a {
color:white;
text-decoration: none;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
display: inline-block;
border-radius: 5px;
}
You are maybe having problems with your padding.
For that, add the box-sizing property in your lis and the padding will be included in the width of the element, like:
#nav ul li {
display: inline-table;
width: 24%;
padding: 4px;
background-color:#242424;
border-radius: 5px;
box-sizing: border-box;
}
Fiddle: http://jsfiddle.net/begyu5v3/
Info: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
And there's those undesirable white spaces between your lis. In this link, there are some ways to avoid this problem, like font-size:
#nav ul {
font-size: 0;
}
#nav ul li {
font-size: 16px;
}
Give it a try and let me know if it helps!
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;
}
I've tried for the past 3 hours to try and get this to work properly with no luck, and am so frustrated.
I have a horizontal menu with links, but I can't get the entire button to be clickable. I then ran into trouble with centering the menu.
Page looks like this (it's centered on the website, container width 900px)
http://i.stack.imgur.com/cFKpf.png
HTML:
<div id="container">
<div id="title">
<h1>Welcome to my website</h1>
</div>
<div id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contacts</li>
<li>FAQ</li>
</ul>
</div>
<div id="content"></div>
</div>
CSS:
#container{
background-color: whitesmoke;
width: 900px;
margin: 0px auto;
padding-bottom: 20px;
}
#menu, #menu ul {
width: 100%;
height: 35px;
background-color: #333;
color: whitesmoke;
margin: 0px auto;
padding: 0px;
float: left;
display: table;
text-align: center;
font-weight: bold;
}
#menu li{
display: table-cell;
padding: 0px 50px;
vertical-align: middle;
border: solid 1.5px olive;
}
#menu a, #menu a:visited {
color: whitesmoke;
text-decoration: none;
}
#menu li:hover {
background-color: olive;
color: white;
}
Any help on how to get the entire button clickable while maintaining the look of the page?
Thanks
You shouldn't give the li a padding. You should set the a to display: block; and give them the padding. Doing that the a will fill the whole box, because there won't be any padding between li and a.
Just set display: block on the anchors:
#menu a {
display: block;
}