I'm trying to center align my menu that goes onto 2 lines.
I'm using ul li. not sure if this is the best option. I've trued everything from posts posted on SO, but nothing doing :(
I would like it to go onto 2 lines and still be centered
Here is s screen shot of what it looks like:
CSS:
#media only screen and (min-width: 300px) and (max-width: 480px) {
.header-links-mobile {
display:inline-block;
width:80%;
position:absolute;
top:60px;
left:0%;
text-align:center;
}
.header-links-mobile ul {
width:90%;
margin:auto;
padding:0;
display: flex;
justify-content: center;
}
.header-links-mobile ul li {
color:#fff;
padding:5px 5px 0 5px;
display: inline;
text-align: center;
}
.header-links-mobile ul li a {
color:#fff;
}
.header-links-mobile ul li a:hover {
color:#fff;
}
}
HTML
<div class="header-links-mobile">
<ul>
<li>
Admin Panel
</li>
<li>
asheenk#cyphernet.co.za
</li>
<li>
Log out
</li>
<li class="ico-account-wrapper">
My account
</li>
<li>
<a href="/mass-supply-live/cart" class="ico-cart" id="topcartlink">
<span class="cart-label">Shopping cart</span>
<span class="cart-qty">(54 ITEM)</span>
</a>
</li>
</ul>
</div>
Please add the following style
.header-links-mobile, .header-links-mobile ul {
width :100%;
}
.header-links-mobile ul {
flex-wrap: wrap;
}
Check this fiddle
Related
I cannot get my drop down menu items to display correctly. Each items in the list (4 of them) appear on top of each other. Any help is greatly appreciated.
this is my html:
<nav>
<ul >
<li><a href='#'><span>SERVICES</span></a>
<ul>
<li><a href='../escuela_eng.html'><span>Equest Sch</span></a></li>
<li><a href='../hst_eng.html'><span>Horse Assist </span></a></li>
<li><a href='../car_eng.html'><span>Care and Recuperation</span></a></li>
<li><a href='../ht_eng.html'><span>Training</span></a></li>
</ul>
</ul>
</nav>
and css:
nav
{
position:absolute;
right:0px;
bottom:0;
left:-.7em;
}
nav ul
{
list-style:none;
}
nav ul li
{
display:relative;
float:left;
padding:0px 15px;
}
nav ul li ul {
display: none;
position:relative;
top:15px;
left:0;
}
ul li ul li {
display:block;
float:none;
position:absolute;
background: #F0EFE7;
padding:0px 10px;
}
ul li:hover ul {
display:block;
position:relative;
margin-left:-17px;
}
nav ul li a
{
font-family: 'HelveticaNeue-UltraLight', cursive;
text-transform:uppercase;
transition: all .25s ease;
position:relative;
float:left;
}
nav ul li a:hover
{
color:#E56038;
}
Many thanks in advance for your help
Remove 'position:absolute' and add 'clear:both; overflow:auto;' to the ul li ul li
Fiddle: http://jsfiddle.net/kc79mwbr/
<style>
nav
{
position:absolute;
right:0px;
bottom:0;
left:-.7em;
}
nav ul
{
list-style:none;
}
nav ul li
{
/* display:block;
*/
/* float:left;
*/
padding:0px 15px;
}
nav ul li ul {
display: none;
/* position:relative;
*/
top:15px;
left:0;
}
ul li ul li {
/* display:block;
*/
/* float:left;
*/
/* position:relative;
*/
background: #F0EFE7;
padding:0px 10px;
}
ul li:hover ul {
display:block;
position:relative;
margin-left:-17px;
}
nav ul li a
{
font-family: 'HelveticaNeue-UltraLight', cursive;
text-transform:uppercase;
transition: all .25s ease;
/* position:relative;
*/
/* float:left;
*/
}
nav ul li a:hover
{
color:#E56038;
}
/*span,a,li{
display:block;
}*/
</style>
<nav>
<ul >
<li>
<a href='#'>
<span>
SERVICES
</span>
</a>
<ul>
<li>
<a href='../escuela_eng.html'>
<span>
Equest Sch
</span>
</a>
</li>
<li>
<a href='../hst_eng.html'>
<span>
Horse Assist
</span>
</a>
</li>
<li>
<a href='../car_eng.html'>
<span>
Care and Recuperation
</span>
</a>
</li>
<li>
<a href='../ht_eng.html'>
<span>
Training
</span>
</a>
</li>
</ul>
</ul>
</nav>
I commented out a lot of the positioning and floating. I think they were causing problems. You could put a max-width on the menu if you wish it to be a certain width.
Please try this code
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style>
nav {
position:absolute;
right:0px;
/*bottom:0;*/
left:-.7em;
}
nav ul{
list-style:none;
}
nav ul li{
display:relative;
float:left;
padding:0px 15px;
}
nav ul li ul {
display: none;
position:relative;
/*you will need set top margine in such a way that there wont be any blank space between parent menu item and sub menu items*/
top:15px;
left:0;
/*line below will prevent displacement of submenu towards right*/
padding-left: 0;
}
ul li ul li {
display:block;
float:none;
/*position:absolute;*/
background: #F0EFE7;
padding:0px 10px;
overflow: auto;
clear: both;
}
ul li:hover ul {
display:block;
position:relative;
/*margin-left:-17px; */
}
nav ul li a{
font-family: 'HelveticaNeue-UltraLight', cursive;
text-transform:uppercase;
transition: all .25s ease;
position:relative;
float:left;
}
nav ul li a:hover{
color:#E56038;
}
</style>
</head>
<body>
<nav>
<ul >
<li><a href='#'><span>SERVICES</span></a>
<ul>
<li><a href='../escuela_eng.html'><span>Equest Sch</span></a></li>
<li><a href='../hst_eng.html'><span>Horse Assist </span></a></li>
<li><a href='../car_eng.html'><span>Care and Recuperation</span></a></li>
<li><a href='../ht_eng.html'><span>Training</span></a></li>
</ul>
</ul>
</nav>
</body>
</html>
You will see following changes
ul li ul li doesn't need to have position:absolute - this was the main reason behind sub-menu items were overlapping each other.
Only for testing purpose I have commented nav's bottom:0;
Few of the suggestions
Please apply classes to ul's and li's
Manage padding and magines more efficiently.
Please refer following links for more info
StackExchange for Submenu CSS
CSS-Tricks for Submenu CSS
Your concerns
I have tested this code in Firefox and I can select the menu items.
Displacement of Sub-menu items has been taken care of in the updated code provided in the answer
To prevent certain alignment / float issues (with referenced to Latest Evetns and Contact) links you will need to test it with FLOAT attributes.
I have a site header created with floating divs using this structure:
nav {
height:inherit;
width:100%;
margin:0 auto;
position:relative;
z-index:10;
text-align: center;
}
#nav-wrap {
min-width: 100%;
width: auto !important;
width:100%;
white-space:nowrap;
}
nav ul#nav-left, #nav-right {
list-style-type:none;
display:inline-block;
margin:0;
padding:0;
width:auto;
height:100%;
}
nav img {
display:inline-block;
padding:0;
margin:0;
max-height:225px;
vertical-align:top;
}
nav ul li {
display:inline-block;
text-align:center;
font-family: 'Oswald',helvetica,arial,sans-serif;
font-size:1.8rem;
font-weight:400;
padding:0 30px;
margin-top:30px;
}
<nav>
<div id="nav-wrap">
<ul id="nav-left">
<li>Option1</li>
<li>Option2</li>
<li>Option3</li>
</ul>
<img src="assets/img/img.png" />
<ul id="nav-right">
<li>Option4</li>
<li>Option5</li>
<li>Option6
</li>
</ul>
</nav>
Updated
I've been playing with layout and the floats were making things tough. So, it's all displayed as inline-block without floats, but the center logo still isn't resizing and I can't figure out what I'm doing wrong. Take a look at the staged site linked below to see what I'm going for. The logo overlap is intentional.
Staged site
I appreciate any help or suggestions. I'd like to avoid using display:table if possible.
#media queries is the thing you needed.
#media (max-width: 700px) {
nav ul li {
font-size:1.3rem;
padding:0 10px;
}
}
#media (max-width: 1200px) {
nav ul li {
font-size:1.5rem;
padding:0 20px;
}
}
#media (min-width: 1201px) {
nav ul li {
font-size:1.8rem;
padding:0 30px;
}
}
#media (max-width: 400px) {
nav ul li {
/*For this you need to use mobile friendly menu **/
}
}
So I've been desperately trying out every method I can find online for centering my nav bar links.
However whatever I do, they seem to either line horizontally (like I want) but to the left of the page (not what I want), or they line vertically (not what I want) but to the center of the page (what I want).
It seems no matter what margin, float, display settings I use in the CSS it never renders the navbar links in a horizontal line, in the center of the page.
My code is:
HTML:
<body>
<div class="maincontent">
<div class="navbar">
<div>
<h1>Tom Love</h1>
<ul>
<li> Home </li>
<li> About </li>
<li> Portfolio </li>
<li> Contact </li>
</ul>
</div>
</div>
</div>
</body>
CSS:
h1 {font-family:'Roboto Slab',sans-serif;
font-size:250%;
font-weight:300;
color:black;
text-align:center;
line-height:32px;
}
h1 span {font-size:60%;
font-family:'Roboto Slab',sans-serif;
}
.navbar {
clear:both;
margin:0 auto;
overflow:hidden;
padding:0;
text-align:center;
width:100%;
}
.navbar div {
float:center;
position:relative;
}
.navbar ul {
list-style-type: none;
text-align:center;
padding:10px;
margin:auto;
}
.navbar ul li {
padding:10px;
float:center;
}
.navbar ul li a {
text-decoration:none;
color:black;
margin:10px;
display:inline;
width:80px;
height:30px;
}
.navbar ul li a:hover {
text-decoration:none;
color:white;
background:black;
}
Apologies for any glaring mistakes in the code, it's my first attempt at building something outside of codeacademy and YouTube tuts.
Thanks in advance :)
Just add
display: inline;
to your .navbar ul li
Remove float:center (it does not exist)
Add display: inline or display: inline-block to .navbar ul li
If you want everything centered then place margin: 0 auto; on .maincontent and give it a width.
The differences between display values are listed here on the MDN.
It could be worth considering a CSS Reset or Normalise. (Do some research on the two options)
Have an example!
CSS
.maincontent {
margin: 0 auto;
width: 800px;
}
h1 {font-family:'Roboto Slab',sans-serif;
font-size:250%;
font-weight:300;
color:black;
text-align:center;
line-height:32px;
}
.navbar ul {
list-style-type: none;
text-align:center;
padding:10px;
}
.navbar ul li {
padding:10px;
display: inline;
}
.navbar ul li a {
text-decoration:none;
color:black;
margin:10px;
}
.navbar ul li a:hover {
text-decoration:none;
color:white;
background:black;
}
I've done designing for desktop screen but it doesn't work for mobile phone. I'm wondering whats the problem. Here is my coding.
HTML
<div id="nav">
<span id="nav-icon"> <img src="assets/images/icon/navigation.png" alt="nav-menu"> </span>
<ul>
<li> LINK </li>
<li> LINK </li>
<li> LINK </li>
<li> LINK </li>
<li> LINK </li>
</ul>
<div class="navimage">
<img src="facebook-icon.png" alt="facebook-icon" />
<img src="twitter-icon.png" alt="twitter-icon" />
</div>
</div>
style.css
#nav {
border-bottom:1px solid #FFF;
margin-bottom:20px;
padding:0;
text-align:center;
max-width:95%;
margin:0 auto;
}
#nav #nav-icon img {
display:none;
}
#nav li {
display:inline;
}
#nav a {
display:inline-block;
padding:15px;
font-family: 'alegreya_sansregular', sans-serif;
font-weight:bold;
font-size:15px;
margin:15px 0;
}
#nav a:hover {
color:#DEB887;
text-decoration:none;
}
.navimage img {
width:30px;
height:30px;
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
}
.imgnav img {
margin-left:-25px;
}
.navimage {
float:right;
margin-top:-80px;
}
responsive.css
#media only screen and (min-width: 480px) and (max-width: 767px) {
#nav {text-align:left;}
#nav-icon img {display:inline-block;height:40px;}
#nav ul, #nav:active ul {display:none;position:absolute;padding: 20px;background:#fff;border: 3px solid #DEB887;left:35px;top:70px;width:20%;border-radius:0 0 3px 3px;z-index:9999;}
#nav:hover ul {display:block;}
.navimage {margin-top:-300px;}
#nav li {text-align:center;display:block;}
#nav ul li a {color:#000;padding:0;}
}
The problem is
1. The image (navigation menu) is not showing at all.
2. Facebook and twitter logo cannot be seen.
3. I hover my mouse somewhere within a site but navigation bar randomly showed up (There wasn't any picture of navigation menu)
Here is the JSFIDDLE..
All for mobile screen (min-width: 480px and max-width: 767px). Any ideas?
Hi I have a dropdown button that when you hover it, it drops down some links to pages. I want those links to be the same size as the width of the button.
The button size is 100% width of the content, so it varies. How do I make the size of the drop down items the same size as the button with CSS?
<style type="text/css">
#button { /* Box in the button */
display: block;
width: 190px;
}
#button a {
text-decoration: none; /* Remove the underline from the links. */
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li{
float:left;
list-style-type: none;
}
#button ul {
list-style-type: none; /* Remove the bullets from the list */
}
#button .top {
display:block;
width:100%;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase; /* The button background */
}
#button ul li.item {
display: none; /* By default, do not display the items (which contains the links) */
}
#button ul:hover .item { /* When the user hovers over the button (or any of the links) */
display: block;
border: 1px solid black;
background-color: #6CC417;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
.container
{
text-align:center;
}
.center_div
{
border:1px solid gray;
margin-left:auto;
margin-right:auto;
width:90%;
background-color:#d0f0f6;
text-align:left;
padding:8px;
}
</style>
</head>
<body bgcolor="#FFFFFF">
<p><img src="Screen%20shot%202010-07-11%20at%204.07.59%20PM.png" width="211" height="86" alt="idc">
<ul>
<li>
<div id="button">
<ul>
<li class="top">OtherOverflow Sites</li>
<li class="item">Visit serverfault</li>
<li class="item">Visit superuser</li>
<li class="item">Visit doctype</li>
</ul>
</div>
</li>
<li>
<div id="button">
<ul>
<li class="top">OtherOverflow Sites</li>
<li class="item">Visit serverfault</li>
<li class="item">Visit superuser</li>
<li class="item">Visit doctype</li>
</ul>
</div>
</li>
</ul></p>
<div class="container">
<div class="center_div">
<h1>Hello World!</h1>
<p>This example contains some advanced CSS methods you may not have learned yet. But, we will explain these methods in a later chapter in the tutorial.</p>
</div>
</div>
</body>
Three things:
#button ul:hover .item needs width set to 100%.
#button ul:hover .item {any of the links) */
display: block;
width:100%;
border: 1px solid black;
background-color: #6CC417;
}
.
All links are set to 120px!
a:link,a:visited {
display:block;
width:120px;
...
Delete the width:120px;
As meder said, Do not use an id, use a class. And the code has the same id multiple times -- which is illegal.
So: <div id="button"> becomes: <div class="DropDwnMenuBtn">.
You have multiple button ids. Use classes for multiple elements.
Shouldn't you just need #button a { display:block; }? It's hard to tell when you don't have a visual.