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;
}
Related
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-->
This is a simple dropdown menu. It's a free template that uses webkit (only learning about what this is). I'm not very good with CSS and I can change so that the dropdown menu will not push the other content down the page, but this creates other problems.
The other problems being that the background of the dropdown menu is no longer red, but transparent and the transition doesn't work.
Additionally, even with a transparent background, when I hover over the dropdown menu, I cannot hover over the entire list without the menu collapsing. For example, in the list below, there are 4 items, Basic, Basic Plus, Ultra, and Ultra Plus. When I've set the ul to position:relative the menu no longer pushes the rest of the content down the page, but when I try to hover over Ultra, the menu goes away.
Here is where I'm developing it:
http://www.oklahomastepparentadoption.com/truck-web/index.php
I really like how the transition works on the entire drop down menu (slide down from the top).
This is the CSS code (HTML below)
.top-nav{
float: right;
width: 70%;
}
.top-nav ul{
padding:0;
margin:0;
}
.top-nav ul li{
display: inline-block;
width: 18%;
margin-right: .4em;
float: left;
position: relative;
}
.top-nav ul li.active{
background: #bb1e10;
}
.top-nav ul li a{
color: #FFF;
font-size: 18px;
margin-right: .4em;
float: left;
padding: 1em 0em 1em 1.4em;
text-align: center;
width: 79%;
}
.top-nav ul li a i{
display: block;
margin-top: 1em;
color: #FFF;
font-size: 11px;
font-style: italic;
}
.top-nav ul ul {
display: none;
left:0;
float: left;
position: relative;
}
.top-nav ul ul li {
float:none;
width:200px;
z-index: 1;
}
.top-nav ul ul li a {
padding: 5px 5px;
}
.top-nav ul li:hover > ul {
display:block;
HTML CODE:
<div class="top-nav">
<span class="menu"><img src="images/menu.png" alt=""></span>
<ul class="nav1" style="margin-top: .5em;">
<li class="hvr-sweep-to-bottom active">Home</li>
<li class="hvr-sweep-to-bottom" style="width:22%;">Fleet Management
<ul class="level_1">
<li>Basic</li>
<li>Basic Plus</li>
<li>Ultra</li>
<li>Ultra Plus</li>
</ul>
</li>
<li class="hvr-sweep-to-bottom">Broker Agency</li>
<li class="hvr-sweep-to-bottom">Drivers</li>
<li class="hvr-sweep-to-bottom">Contact</li>
<div class="clearfix"> </div>
</ul>
Add position: absolute to the menu. Also make sure to update the top and background:
.top-nav ul ul {
display: none;
left: 0;
/* Changes below */
float: none;
position: absolute;
top: 62px;
background: #bb1e10;
}
Preview
Update
Add this to the .header:
.header {
position: relative;
z-index: 10000;
}
Fixes the last links:
Exactly as Praveen says, you need to make the nav absolutely positioned. Make sure though, the container 'header' is relative positioned, else it will fill 40% of the whole screen.
check out this fiddle to see what i mean: https://jsfiddle.net/ho2sph79/
.header {
position:relative;
}
.top-nav {
position:absolute;
width:40%;
top:0;
right:0;
}
you can try this http://callmenick.com/post/slide-down-menu-with-jquery-and-css and as i noticed, your css for the dropdown doesnt have any transition elements. try the link i provided it may help you out regarding transitions
sorry to post this cause I know the answer is probably super simple, but I have a div with a background image that is being cut off for some reason and i cant figure out, why?
I tried the make the div size bigger with height and width properties, I tried moving the divs around and I also tried the line-height property and I got nothing.
I have been working on this for while so I'm going to work on something else in the meantime I was hoping someone could look over it and help, possibly point me in the right direction.
THANKS!
Here is the HTML:
<nav>
<ul id="navUl">
<li class="navLinks"><a class="taimurknaziri" href="#top"><strong>TAIMUR K NAZIRI</strong></a></li>
<li class="navLinks">
<a class="navLinks" href="#projects">Projects</a>
<!-- START SUB-MENU FOR PROJECTS -->
<ul class="fallback">
<li class="navLinks">Websites</li>
<li class="navLinks">API's</li>
<li class="navLinks">Games</li>
</ul>
<!-- END SUB-MENU FOR PROJECTS -->
</li>
<li class="navLinks"><a class="navLinks" href="#about">About</a></li>
<li class="navLinks"><a class="navLinks" href="#contact">Contact</a></li>
<li class="navLinks"><a class="navLinks" href="#contact">Blog</a></li>
</ul>
</nav>
<br>
<!-- BACKGROUND -->
<div id="backgroundContainer"><br>
<div id="titleContainer">
<img id="tkn" src ="images/tkn.png">
</div>
</div>
Herre is the CSS:
body,html {
border:0;
margin:0;
padding:0;
height: 100%;
}
/* BEGIN HOME PAGE STYLING */
/* NAVIGATION BAR */
nav {
background:#ffffff;
position: fixed;
float:left;
width: 100%;
opacity: 0.8;
}
nav ul {
text-align:center;
}
nav ul li {
float:left;
display:inline;
}
nav ul li:hover {
color:#000000;
}
nav ul li a {
font-size: 11pt;
font-family: Impact;
text-decoration: none;
display:block;
padding:15px 30px;
color:#6f6f6f;
}
nav ul li ul {
position: absolute;
width:110px;
background:#ffffff;
}
nav ul li ul li {
width:110px;
}
nav ul li ul li a {
display:block;
padding:15px 10px;
color:#6f6f6f;
}
li:hover a {
color:#000000;
}
nav ul li ul.fallback {
display:none;
}
li:hover ul.fallback {
display:block;
color:#000000;
}
#navLinksContainer {
display: inline-block;
margin-top: 40px;
margin-right: ;
margin-bottom: ;
margin-left: 25px;
}
/* BEGIN BACKGROUND STYLING */
#backgroundContainer {
line-height: 40px;
background-image: url("images/nyc_bg.png");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: 100%;
max-height: 100%;
margin-top: 50px;
}
/* TITLE THAT IS FIRST LOADED ON THE PAGE */
#titleContainer {
display: inline-block;
}
#tkn {
margin-left: 350px;
margin-top: 100px;
}
Change:
max-height: 100%;
background-size: 100%;
to:
height: 100%
background-size: cover; /* or background-size: 100% 100%; */
for #backgroundContainer.
http://jsfiddle.net/hr9G9/
There are two issues you're facing here. Both background-size and max-height are using percentages in terms of their parent div. Background-size also accepts two values - the first being width, and the second being height. If the second height isn't set, it will default to auto, which isn't what you're looking for. Setting both background-size values to 100% while changing the max-height to height solves all of your problems.
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/