I need to align this navigation menu centered horizontally on the page. I would also like to reduce the size of the box the text appears in.
JSFiddle: http://jsfiddle.net/6W2qm/
HTML
<nav>
<ul class="navigation">
<li>Home</li>
<li>Biography</li>
<li>Media
<ul>
<li>Pictures</li>
<li>Videos</li>
</ul>
</li>
<li>Tour</li>
<li>Contact</li>
</ul>
</nav>
CSS
nav {
height:100px;
list-style:none;
text-align:center;
width:1024px;
}
nav ul ul {
display:none;
padding:0;
position:absolute;
top:10%;
}
nav ul li:hover > ul {
display:block;
}
nav ul {
list-style:none;
margin:0;
padding:0;
position:relative;
}
nav ul:after {
clear:both;
content:"";
display:block;
}
nav ul li {
float:left;
width:100px;
}
nav ul li a {
display:block;
padding:25px 40px;
text-decoration:none;
width:0;
}
nav ul ul li {
float:none;
position:relative;
}
nav ul ul li a {
padding:15px 40px;
}
I can't tell about the rest of your page when you only provided a small amount of the code, but this looks OK now.
JSFiddle: http://jsfiddle.net/D9z3s/
I changed the following line to 50% instead of 10% and it doesn't overlap anymore:
nav ul ul {
padding: 0;
position: absolute;
top: 50%;
}
Related
I got a navbar with several levels that i changed acording to this site:https://codepen.io/philhoyt/pen/ujHzd
I've looked around on the internet but the solutions they provide (using display:inline-block) did not seem to work out.
Sources i've tryed:
How to center a navigation bar with CSS or HTML?
how to center css navigation bar
Any help would be appriciated.
#primary_nav_wrap
{
margin:auto;
}
#primary_nav_wrap ul
{
list-style:none;
text-align:center;
position:relative;
float:left;
margin:auto;
padding:0;
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:Futura;
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
<nav id="primary_nav_wrap">
<ul>
<li>Nieuws</li>
<li>Info ▼
<ul>
<li>Taf & Toetje</li>
<li>Papierwerk</li>
<li>Uniform</li>
<li>Technieken</li>
</ul>
</li>
<li>Algemeen</li>
<li>Foto's</li>
<li>Inschrijven</li>
<li>Contact</li>
<li>Permekiaan ▼
<ul>
<li class="dir">Kapoenen ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
<li class="dir">
Kawellen ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
<li class="dir">
Jong-Givers ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
<li class="dir">
Givers ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
I made some changes to these two classes:
#primary_nav_wrap
{
margin:auto;
text-align:center;
}
#primary_nav_wrap ul
{
list-style:none;
text-align:center;
display: inline-block;
position:relative;
margin:auto;
padding:0;
}
The solution was to use display:inline-block and text-align:center;. But also deleting the float: left. Working Fiddle
Try to add :
position: absolute;
left: 50%;
transform: translateX(-50%);
at #primary_nav_wrap
You can use this code to center the whole nav.
#primary_nav_wrap ul {
list-style: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
right: 0;
margin: 0;
padding: 0;
}
I removed the float from the ul and li's and added display: inline-block to the li tags, so I ended up with this:
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
text-align: center;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
display: inline-block;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
Add class to <ul> make it <ul class="extra"> and add css to that class .extra{left:33.33%}
You just need to make few changes in your css classes.
#primary_nav_wrap ul li
{
position:relative;
/*float:left;*/
margin:0;
padding:0;
display:inline-block;
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
/*float:left;*/
margin:0;
padding:0;
text-align:center
}
Please check updated fiddle
HTML Center navbar with flexbox
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:Futura;
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
/* flexbox */
#primary_nav_wrap {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: auto;
background-color: lightgrey;
}
#primary_nav_wrap ul {
list-style:none;
background-color: cornflowerblue;
//padding: 1rem;
//margin: 1rem;
-webkit-align-self: center;
align-self: center;
}
/* || flexbox */
<nav id="primary_nav_wrap">
<ul>
<li>Nieuws</li>
<li>Info ▼
<ul>
<li>Taf & Toetje</li>
<li>Papierwerk</li>
<li>Uniform</li>
<li>Technieken</li>
</ul>
</li>
<li>Algemeen</li>
<li>Foto's</li>
<li>Inschrijven</li>
<li>Contact</li>
<li>Permekiaan ▼
<ul>
<li class="dir">Kapoenen ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
<li class="dir">
Kawellen ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
<li class="dir">
Jong-Givers ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
<li class="dir">
Givers ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
What happens if you add left and right auto margins to primary_nav_wrap? i.e. add this to CSS:
#primary_nav_wrap
{
margin-top:15px;
margin-right: auto;
margin-left: auto;
}
I am trying to do a Menu that will appear when Window width is resized to a small resolution. Below is the HTML and CSS are below
<nav>
<a id="menu-dropdown"><img src="http://localhost/influenza/logo/menu.png" /></a>
<ul>
<li><a class="tab-click" href="http://localhost/influenza/index.php">Home</a></li>
<li>Articles</li>
<li>Webinars</li>
</ul>
</nav>
CSS:
nav ul
{
list-style:none;
}
nav li{
display:inline;
line-height:1.5px;
}
nav li:not(:first-child) > :only-child,
nav ul > :first-child a{
text-decoration:none;
font-size:1.4em !important;
outline:1px solid blue;
padding:8px;
letter-spacing:0.9px;
margin-left:18px;
}
nav li:not(:first-child) > :only-child{
color:blue;
}
nav ul > :first-child a{
color:white !important;
background:blue;
}
Output in Horizontal:
Home Articles Webinars
How can I bring back the list to Vertical then set "ul" position to absolute and make "nav a" to be visible. The list should display vertically like below
Home
Articles
Webinars
nav{
position:relative;
}
nav ul
{
position:absolute;
top:40px; /* this height is same as the menu.png */
left:0;
z-index:999;
list-style:none;
}
nav li{
list-style:none;
display:block;
}
nav ul li a{
display:block;
}
nav li:not(:first-child) > :only-child,
nav ul > :first-child a{
text-decoration:none;
font-size:1.4em !important;
outline:1px solid blue;
padding:8px;
letter-spacing:0.9px;
margin-left:18px;
}
nav li:not(:first-child) > :only-child{
color:blue;
}
nav ul > :first-child a{
color:white !important;
background:blue;
}
<nav>
<a id="menu-dropdown"><img src="http://localhost/influenza/logo/menu.png" /></a>
<ul>
<li><a class="tab-click" href="http://localhost/influenza/index.php">Home</a></li>
<li>Articles</li>
<li>Webinars</li>
</ul>
</nav>
Hi There can anyone help me i try to create a dropdown submenu but it doesn't work for me.
I dont know how to reate a nice menu.
example:
When i hover over "massages" then the menu must come down and show the submenu.
css here
.menu{
width:821px;
height:42px;
margin:0px;
background:url(images/menu.gif) no-repeat left;
}
.menu ul{
list-style:none;
padding:0 0 0 15px;
margin:0px;
}
.menu ul li{
display:inline;
}
.menu ul li ul{
display:inline;
}
.menu ul li a{
float:left;
height:42px;
border:none;
padding:0 15px 0 15px;
text-decoration:none;
color:#fff;
line-height:42px;
font-size:14px;
}
.menu ul li.aktivni-active a{
float:left;
height:42px;
border:none;
padding:0 15px 0 15px;
text-decoration:none;
line-height:42px;
font-size:14px;
Html:
<div class="menu">
<ul>
<li class="aktivni-active">Home</li>
<li>Massages</li>
<ul>
<li>Aanbiedingen</li>
</ul>
<li>Aanbiedingen</li>
<li>Prijzen</li>
<li>Agenda</li>
<li>Contact</li>
</ul>
</div>
Can anyone explane me how to create a dorpdown submenu on "Massages"
Thnx
Check with the below link.
Fiddle
/* Menu Dropdown */
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
color: #fff;
background: #666;
padding: 5px;
display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 30px;
left: 0;
}
ul#menu li ul.sub-menu a {
width:150px;
}
ul#menu li:hover ul.sub-menu {
display:block;
}
/* Top Nav Background Hover */
ul#menu li a:hover {
background:#000;
}
ul#menu li ul li a:hover {
background:#999;
}
/* 3rd level nav */
ul#menu li ul.sub-menu li ul {
display:none;
position: absolute;
top: 0px;
left: 115px;
width: 100px;
}
/* show the 3rd level when the second is hover */
ul#menu li ul.sub-menu li:hover ul {
display:block;
}
/* Menu Dropdown */
You should change your markup, as far as I know submenu should be part of list item it refers to
<ul>
<li class="simple-item">item</li>
<li class="submenu">item
<ul class="submenu-goes-inside-li">
<li class="simple-item">item</li>
<li class="simple-item">item</li>
<li class="simple-item">item</li>
</ul>
</li>
</ul
In your case submenu is separated from list items.
Using the same structure you have just add class to the drop menu,
set ul inside the dropMenu to display none, then to display on however. You can use css3 or jquery to make it have a nice animation or toggle.
<div class="menu">
<ul>
<li class="aktivni-active">Home</li>
<li class="dropMenu">Massages</li>
<ul>
<li>Aanbiedingen</li>
</ul>
<li>Aanbiedingen</li>
<li>Prijzen</li>
<li>Agenda</li>
<li>Contact</li>
</ul>
</div>
CSS
.menu ul{
display:none
}
.menu:hover ul{
display:block;
}
if you want some better just use jquery http://api.jquery.com/toggle/
I want to build a simple CSS dropdown menu. It works if I use absolute positioning, but starts to push down the content if I use relative positioning. What is the reason for this? Using absolute positioning for the DIVs menu and content is not an option for me unfortunately.
HTML:
<div id="menu">
<ul>
<li class="topmenu">
Top 1
<ul>
<li class="submenu">Sub 1</li>
<li class="submenu">Sub 2</li>
</ul>
</li>
</ul>
</div>
<div id="content">
Test
</div>
CSS:
#menu {
position:relative;
}
#menu ul {
list-style-type:none;
list-style-image:none;
margin:0px;
padding:0px;
}
#menu li.topmenu {
float:left;
}
.topmenu a {
float:left;
width:110px;
}
.topmenu ul{
display:none;
}
.submenu a{
width:110px;
clear:both;
}
.topmenu:hover ul {
display:block;
z-index:10;
}
#content {
display: block;
clear: both;
z-index: 1;
}
I've simplified the code, removed the horrible floats and substituted with display: inline-block and fixed the positioning issue.
(Demo)
#menu ul {
list-style:none;
margin:0px;
padding:0px;
font-size: 0px;
}
#menu li {
font-size: 1rem;
}
#menu > ul > li {
display: inline-block;
}
#menu ul ul {
display: none;
}
#menu ul li:hover ul {
display: block;
position: absolute;
}
#menu a {
display: inline-block;
width:110px;
}
I'm currently designing a Nav menu that includes ul, li and a elements. I'm trying to produce an effect where hovering over an a tag will only change the background color near the text for the link itself instead of the whole li area around it.
HTML:
<nav>
<div class="full_menu">
<ul>
<li>Login</li>
<li>About</li>
<li>FAQ</li>
<li>Blog</li>
<li>Our Team
<ul>
<li>Bob</li>
<li>James</li>
<li>Tom</li>
</ul>
</li><!--End team dropdown -->
</ul>
</div>
CSS:
nav {
margin:0 auto;
text-align:center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display:block;
}
nav ul {
background: #17A74A;
padding:0px;
list-style:none;
position:relative;
display: inline;
border:0px;
}
nav ul li {
float:right;
margin-top:0px;
}
nav ul li a {
display:block;
padding:33px 40px;
color:#000;
text-decoration:none;
font-weight:bold;
font-size:18px;
}
nav ul li a:hover {
background-color:#2D6AF7;
color:#FFF;
}
nav ul ul {
background:#17A74A;
position:absolute;
top:71px;
}
nav ul ul li {
float:none;
border-bottom:1px solid #FFFFFF;
}
nav ul ul li a {
padding:15px 40px;
color:#FFF;
}
nav ul ul li a:hover {
background:#27BCDD;
}
nav ul ul ul {
position:absolute;
left:100%;
top:0;
}
I thought that by using nav ul li a:hover would fix this problem but the whole li area is still changing its background color instead of just the immediate area around the link text.
Any help would be greatly appreciated!
Do you want to achieve following result? I've removed the padding from your <a> elements and added them to the <li> elements instead.
JSFiddle
You need to change the padding to a margin if you don't want the whole thing to change color. Try this:
nav ul ul li a {
margin:15px 40px;
color:#FFF;
}