My site navigation menu is coded as follows:
The HTML Code:
<div class="menu">
<ul>
<li class="active">Home</li>
<li class="inactive">About</li>
<li class="inactive">Post Your Ad</li>
<li class="inactive">Tenders</li>
<li class="inactive">Contact Us</li>
<li class="inactive">FAQ</li>
</ul>
</div>
The CSS Code:
.menu {
height: 100px;
z-index: 999;
}
.menu li {
display: inline;
float: left;
width: auto;
}
.menu ul {
margin-top: 2px;
}
.menu a {
text-decoration : none;
font-size: 15px;
color: #ffffff;
}
.menu li:hover {
background-color: #16a085;
}
.active , .inactive {
width: 83%;
}
.active {
background-color: #16a085;
}
.inactive {
background-color: #34495e;
}
/* Navigation Button */
.btn {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0px;
font-size: 22px;
background: #34495e;
padding: 48px 40px 31px 40px;
text-decoration: none;
}
.btn:hover {
background: #16a085;
text-decoration: none;
}
The JSFiddle is at: http://jsfiddle.net/VCKwN/
PROBLEM DEFINITION:
How can i convert the existing menu, keeping its all styles as is, into a responsive menu for a mobile site?
When the screen size reduces, the menu should get hidden, and a button should appear. clicking on the button the menu should reappear.
Is this possible?
You could do something like this - JSFiddle Demo
Javascript
var menu = document.getElementById('menu');
document.getElementById('open-menu').onclick = function() {
menu.classList.toggle('show');
}
CSS:
We hide the mobile menu button initially. And there's a media-query that overrides a few of the menu styles when it's below 480px wide. (Setting the menu items to display block etc;)
.mobile-menu { display:none; }
#media only screen and (max-width: 480px) {
.mobile-menu { display:inline-block; padding:5px; background:#ccc; border:1px solid #000;}
.menu { display:none; }
.menu ul { height:auto;}
.menu ul li,
.menu ul li a { float:none; display:block }
.menu ul li a { padding:15px 6px;}
.show { display:block; }
}
div with width:100%
use the media queries to control the size of the screen
create a button and put it hidden, then with media queries display it and hide the div-menu
take a look at responsive bootstrap menu , so you can make an idea
navbar
navbar-static-top/
navbar-fixed-top/
Related
My website has a 3 item in nav menu, I've turned off the responsive menu toggle, and want it to drop below the logo in tablet and mobile. However, I'm unable to do that. I just want navbar to drop a line and retain the same look.
Screengrab
Full width vs mobile
I've placed block on both .srt-menu classes in both the full size and 480 screens, but nothing works. Also declared a width for each menu item, or removing all block displays and using float.
Any help would be appreciated.
Here's the HTML code:
<header class="wrapper clearfix">
<div id="banner">
<div id="logo"><img src="images/header.png" alt="logo"></div>
</div>
<!-- main navigation -->
<nav id="topnav" role="navigation">
<ul class="srt-menu" id="menu-main-navigation">
<li class="about">About</li>
<li class="gallery">Gallery</li>
<li class="contact">Contact</li>
</ul>
</nav><!-- end main navigation -->
</header>
#menu-main-navigation{
display:block;
}
.srt-menu, .srt-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.srt-menu ul {
position: absolute;
display:none;
width: 12em; /* left offset of submenus need to match (see below)
*/
}
.srt-menu ul li {
width: 20%;
}
.srt-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.srt-menu li {
float: left;
position: relative;
margin-left:1px;
max-width: 100px;
}
.srt-menu li li {
margin-left:0px;
}
.srt-menu a {
display: block;
position: relative;
}
#topnav, .srt-menu {
float:right;
margin: 1.2em 0 0 0;
}
.srt-menu a {
text-decoration:none;
color: #000000;
}
.srt-menu li a {
background:#fff;
margin:0;
padding:0px 25px;
height:45px;
max-width: 100px;
}
.srt-menu a, .srt-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color: #000000;
}
/*LARGER MOBILE DEVICES
This is for mobile devices with a bit larger screens.*/
#media only screen and (min-width: 480px) {
#banner{
float:left;
text-align:left;
margin-bottom:20px;/*this depends on the height of the logo*/
}
.topnav {
float:left;
margin: .2em;
}
.srt-menu, ul.srt-menu {
display: block !important;
}
}
Fixed! I guess I needed to write out the problem.
I made a navbar with different colored buttons and hover effects, but I didn't specify 'inline-block' for them. In full-width, the navbar inherited margins and widths from the parent div.
Basically, change a block to inline-block, tweaked some padding and margins.
.srt-menu li.about, .srt-menu li.gallery, .srt-menu li.contact {
display:inline-block;
margin:1px 0;
padding:10px;
text-decoration:none;
font-size: 1.4em;
}
I have been trying to make this responsive CSS/HTML menu work, and it's displayed in the colors I want when it's in full screen/normal desktop view, but when I view it in "responsive" view e.g a phone resolution, the menu colors aren't displaying the right way...
As per the full screen version the colors should be as follows
menu text - #278189
background - #fff
hover background - #3A3A3A
I have trawled through the code time after time but cannot see why this isn't working? for some other strange reason "home" "about" and "contact" have a black hover background.
Another minor issue (not massively bothered but would be nice to know) is when in full screen there is a "home" button which will link to the index page, but in the smaller version there is a "menu" button too...?
TIA
Dan
<html>
<head>
<meta charset="utf-8">
<title>Primeheat | Chichester Plumbing & Heating Installation,
Maintenance & Emergency Breakdown</title>
<meta name="viewport" content="width=device-width">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav>
<div id="logo">Your Logo here</div>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Home</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" class="toggle">Plumbing</label>
Plumbing
<input type="checkbox" id="drop-1"/>
<ul>
<li>Installation</li>
<li>Service</li>
<li>Breakdown</li>
</ul>
</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-2" class="toggle">Heating</label>
Heating
<input type="checkbox" id="drop-2"/>
<ul>
<li>Installation</li>
<li>Service</li>
<li>Service</li>
<li>
</ul>
</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
<div id="navbar2" div id class="navbar2">
<h1 class="h1">Welcome to Primeheat Plumbing & Heating</h1>
</div>
</body>
</html>
body {
background: #212121;
font-size:22px;
line-height: 32px;
color: #278189;
margin: 0;
padding: 0;
word-wrap:break-word !important;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #278189;
}
h3 {
font-size: 30px;
line-height: 34px;
text-align: center;
color: ##278189;;
}
h3 a {
color: ##278189;;
}
a {
color: ##278189;;
}
h1 {
margin-top: 100px;
text-align:center;
font-size:60px;
line-height: 70px;
font-family: 'Bree Serif', 'serif';
}
#container {
margin: 0 auto;
max-width: 890px;
}
p {
text-align: center;
}
.toggle,
[id^=drop] {
display: none;
}
/* Giving a background-color to the nav container. */
nav {
margin:0;
padding: 0;
background-color: #FFFFFF;
}
#logo {
display: block;
padding: 0 30px;
float: left;
font-size:20px;
line-height: 60px;
}
/* Since we'll have the "ul li" "float:left"
* we need to add a clear after the container. */
nav:after {
content:"";
display:table;
clear:both;
}
/* Removing padding, margin and "list-style" from the "ul",
* and adding "position:reltive" */
nav ul {
float: right;
padding:0;
margin:0;
list-style: none;
position: relative;
}
/* Positioning the navigation items inline */
nav ul li {
margin: 0px;
display:inline-block;
float: left;
background-color: #fff;
}
/* Styling the links */
nav a {
display:block;
padding:14px 20px;
color:#278189;
font-size:17px;
text-decoration:none;
}
nav ul li ul li:hover { background: #3A3A3A; }
/* Background color change on Hover */
nav a:hover {
background-color: #3A3A3A;
}
/* Hide Dropdowns by Default
* and giving it a position of absolute */
nav ul ul {
display: none;
position: absolute;
/* has to be the same number as the "line-height" of "nav a" */
top: 60px;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
}
/* Second, Third and more Tiers
* We move the 2nd and 3rd etc tier dropdowns to the left
* by the amount of the width of the first tier.
*/
nav ul ul ul li {
position: relative;
top:-60px;
/* has to be the same number as the "width" of "nav ul ul li" */
left:170px;
}
/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
/* Media Queries
-------------------------------------------- */
#media all and (max-width : 768px) {
#logo {
display: block;
padding: 0;
width: 100%;
text-align: center;
float: none;
}
nav {
margin: 0;
}
/* Hide the navigation menu by default */
/* Also hide the */
.toggle + a,
.menu {
display: none;
}
/* Stylinf the toggle lable */
.toggle {
display: block;
background-color: #FFF;
padding:14px 20px;
color:##278189;
font-size:17px;
text-decoration:none;
border:none;
}
.toggle:hover {
background-color: #278189;
}
/* Display Dropdown when clicked on Parent Lable */
[id^=drop]:checked + ul {
display: block;
}
/* Change menu item's width to 100% */
nav ul li {
display: block;
width: 100%;
}
nav ul ul .toggle,
nav ul ul a {
padding: 0 40px;
}
nav ul ul ul a {
padding: 0 80px;
}
nav a:hover,
nav ul ul ul a {
background-color: #000000;
}
nav ul li ul li .toggle,
nav ul ul a,
nav ul ul ul a{
padding:14px 20px;
color:#464646;
font-size:17px;
}
nav ul li ul li .toggle,
nav ul ul a {
background-color: #3a3a3a;
}
/* Hide Dropdowns by Default */
nav ul ul {
float: none;
position:static;
color: #278189;
/* has to be the same number as the "line-height" of "nav a" */
}
/* Hide menus on hover */
nav ul ul li:hover > ul,
nav ul li:hover > ul {
display: none;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li {
position: static;
/* has to be the same number as the "width" of "nav ul ul li" */
}
}
#media all and (max-width : 330px) {
nav ul li {
display:block;
width: 94%;
}
}
Before going into your stated problem, I would like to point out some obvious mistakes in your code. First mistake, you typed some of the color hex codes wrongly. You type extra hashtags and semicolons. Not only this h3 tag, but others as well. Check your code properly.
h3 {
font-size: 30px;
line-height: 34px;
text-align: center;
color: ##278189;; /* should be #278189; */
}
Second mistake, why do you style the same tag (h1) twice? I can understand you style it twice if one of them is either inside a media query or nested under other tags or classes/ids, but it's not.
h1 {
font-size: 60px;
text-align: center;
color: #278189;
}
h1 {
margin-top: 100px;
text-align:center;
font-size:60px;
line-height: 70px;
font-family: 'Bree Serif', 'serif';
}
Ok, to solve your problem:
You mentioned that menu colors aren't displaying correctly in mobile resolution.
Under the media query #media all and (max-width : 768px), you have something like this below. Just change it to the color that you want, which is #3A3A3A.
.toggle:hover {
background-color: #278189; /* it's using the menu text color. change this to the color you want, which is #3A3A3A */
}
If you want the nav items to have the same hover background color, change this as well, also under the same media query.
nav a:hover,
nav ul ul ul a {
background-color: #000000; /* #000000 is black color. Change this */
}
If the submenu text is meant to have the #278189 too, change this.
nav ul li ul li .toggle,
nav ul ul a,
nav ul ul ul a{
padding:14px 20px;
color: #464646; /* change this too... */
font-size:17px;
}
Another minor issue (not massively bothered but would be nice to know) is when in full screen there is a "home" button which will link to the index page, but in the smaller version there is a "menu" button too...?
The "menu" button that you mention is for collapsing the dropdown menu on mobile resolution. You click it, the dropdown menu will be shown. It's from this line of html code:
<label for="drop" class="toggle">Menu</label>
If you were to remove this whole line, you can't get the dropdown menu on mobile resolution anymore, as the dropdown css code are all handled by the toggle class.
Basically, your mentioned problems aren't big. If you're not sure where does the color come from, why is it showing the wrong color, etc, you can always use inspect element from your browser to look for it (read here for more info if you don't know much about inspect element. Also, always make sure your code is free from syntax errors (read more about css syntax), like the color hex codes like I mention above.
I am trying to create a simple navigation bar which when resized (made smaller) will create a small menu which once clicked will show the links, much like Bootstrap.
Issue 1: When resized the links do disappear, as intended, but when I expand the mini menu (click show navigation), the links (link 1, link 2 etc) show up on my logo and just in general off place ( I want the links to show up neatly, like the image below).
Issue 2: As you will see with image below, the code I have, for some reason causes a gap to emerge between each <li>.
Here is a fiddle created to show the issues and the code used: https://jsfiddle.net/n00jg7xy/
FOr the second problem, about padding, the problem is here:
#nav > ul > li{
width: 25%; //Here you are forcing to 1/4 of the space, remove this line
height: 100%;
float: left;
}
I dont know if the snippet size is going to let you see the change, here is the fiddle.
#wrapper{
width: 100%;
height: auto;
}
#header{
height: auto;
border-bottom: 1px solid black;
}
#logo {
float: left;
}
/******************* Main Navigation ************************/
.mainNav{
margin: 10px;
}
#nav > a{
display: none;
}
#nav li{
position: relative;
}
#nav > ul{
height: 3.75em;
}
#nav > ul > li{
height: 100%;
float: left;
}
#nav li ul{
display: none;
position: absolute;
top: 100%;
}
#nav li:hover ul{
display: block;
}
#media only screen and ( max-width: 40em ){
#nav{
position: relative;
}
#nav > a{
}
#nav:not( :target ) > a:first-of-type,
#nav:target > a:last-of-type
{
display: block;
}
/* first level */
#nav > ul
{
height: auto;
display: none;
position: absolute;
left: 0;
right: 0;
}
#nav:target > ul
{
display: block;
}
#nav > ul > li
{
width: 100%;
float: none;
}
/* second level */
#nav li ul
{
position: static;
}
}
/***********************/
/* Remove margins and padding from the list*/
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
/* Float the list items side by side */
ul.topnav li {
float: left;
}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 14px;
}
/* Change background color of links on hover */
ul.topnav li a:hover {
background-color: #f9f9f9;
color: darkred;
transition: 0.3s;
}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {
display: none;
}
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
#media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
<div id="wrapper">
<p>
Resize the window
</p>
<div id="header">
<div><img id="logo" src="http://i65.tinypic.com/352i0jq.jpg" alt="logo" href="#"> </div>
<div class="mainNav">
<nav id="nav" role="navigation">
Show navigation
Hide navigation
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li>Link 1</li>
<li>Link 2</li>
<li> Link 3</li>
<li> Link 4</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- wrapper closed-->
I have made a drop down menu and got some styling issues with it. My code for drop down menu is
<ul class="dd">
<li><a href="main.php" >Home</a>
</li>
<li>Profile
</li>
<li>Inbox' . $unread_numrows . '
</li>
<li>Management
<ul>
<li>Settings
</li>
<li>Logout
</li>
</ul>
</li>
</ul>';
CSS
#media screen and (max-width: 1280px) {
.dd {
background-color:#BF3B3D;
position: absolute;
right:0px;
top:0;
margin-right: 4%;
}
}
#media screen and (min-width: 1280px) {
.dd {
background-color:#BF3B3D;
position: absolute;
right:0px;
top:0;
margin-right: 10%;
}
}
#media screen and (min-width: 1920px) {
.dd {
background-color:#BF3B3D;
position: absolute;
right:0px;
top:0;
margin-right: 25%;
}
}
.dd li {
border-radius: 4px;
background-color: #BF3B3D;
float: left;
position: relative;
list-style: none;
top:8px;
padding: 10px 5px 10px 5px;
}
.dd li:hover{
background-color: #7A0709;
}
.dd li a{
font-size: 14px;
color:#ffffff;
text-decoration: none;
background-color: #BF3B3D;
}
.dd li ul li{
top: 14px;
border-radius: 4px;
}
.dd li:hover ul{
background-color: #BF3B3D;
}
.dd li:hover a{
background-color: #7A0709;
}
.dd li:hover li a{
background-color:#BF3B3D;
}
.dd li ul{
display: none;
}
.dd li:hover ul {
display: block;
position: absolute;
}
.dd li:hover li {
float: none;
}
.dd li ul li:hover a{
background-color: #7A0709;
}
Now when I hover over menu it's color changes and so for sub-menu's, but when sub-menu's are open under menu the color for that menu is also changed though I am rolling over sub-menu so when rolling over sub-menu I want only sub-menu's color changed and menu should go back to it's color. Also their appears to be some space between sub-menu and menu that took some of space inside menu I want to get rid of that space.
To fix that hover effect problem use immediate children selector for main menu hover css. like this.
.dd > li:hover{
background-color: #7A0709;
}
">" will only select immediate children only. so on sub menus will only effect by your other css hover.
to fix height problem you should provide top main menu a display:block and fixed height as you want. to help on that more, you better provide a fiddle.
I have an 8 item menu, to get it evenly spaced across IE, Chrome Firefox and when viewed using an ipad I've had to use extraneous padding within the stylesheet which works but is so messy. Not helping is the fact each menu item is a different width.
Having spent several hours on google I've achieved absolutely nothing. If possible looking for a much cleaner solution, HTML and CSS below
<nav>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Convertible Roofs</li>
<li>Contact Us</li>
<li>Gallery</li>
<li>Customer Comments</li>
<li class="active">Buyers Guide</li>
<li>Leather Care</li>
</ul>
</nav>
nav ul {
margin:0;
padding:0;
background:rgba(0,0,0,.2);
}
nav ul li {
display:inline-block;
border-right:1px solid rgba(255,255,255,.2);
margin-right:-3px;
}
nav ul li:last-child {
border-right:none;
}
nav ul li a {
display:inline-block;
padding:14px 21.3px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
font-size:0.938em;
outline:0;
color:#fff;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
nav ul li a {
padding:14px 20.7px;
}
}
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
nav ul li a {
padding:14px 21.3px;
}
}
#-moz-document url-prefix() {
nav ul li a {
padding:14px 20.7px;
}
}
nav ul li a:hover,nav li.active a {
color:#fff;
background:rgba(0,0,0,.4);
}
See if you can follow this as is; if not, I'll do you a fiddle ...
The basic premise is to make the elements behave like table cells so you don't need the padding. I did a quick edit in Firebug - see if it works for you:
nav {
display: table;
height: 50px;
width: 100%;
}
nav ul {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
display: table-row;
margin: 0;
padding: 0;
width: 100%;
}
nav ul li {
border-right: 1px solid rgba(255, 255, 255, 0.2);
display: table-cell;
line-height: 50px;
}
nav ul li a {
color: #fff;
display: block;
font-size: 0.938em;
outline: 0 none;
padding: 0;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
You can remove the rule that adds the padding (line 170).
Disclaimer: Not tested in anything other than Firefox.
Did a bit more digging and found this answer by #Rob Lowe on this page how to make a ul li css menu with variable space between items, very close to your method #Jayx so thanks again.
nav {
width:960px;
display:table;
background:rgba(0,0,0,.2);
border-collapse:collapse;
margin:0;
padding:0;
}
nav ul {
display:table-row-group;
list-style:none;
margin:0;
padding:0;
}
nav li {
display:table-cell;
border-right:1px solid rgba(255,255,255,.2);
vertical-align:middle;
}
nav li a {
display:block;
padding:12px 15px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
font-size:0.938em;
outline:0;
color:#fff;
}