I'm trying to make my website accessible via mobile and have arranged it so below a certain size the menu bar at the top turns into a dropdown. Unfortunately it works with hover so when I try to use it on my mobile nothing happens at all. Can anyone suggest how I would alter the code to make it work with touch?
html
<nav id="nav_mobile" role="navigation">
<ul>
<li>Home</li>
<li>News</li>
<li>Gallery</li>
</ul>
</nav>
CSS
#nav_mobile {
position: relative;
padding-top: 2%;
margin: 0px auto;
}
#nav_mobile ul {
width: 100%;
text-align: center;
position: absolute;
background: #F8F8F8;
min-height: 50px;
background-image: url('../img/Menu_button.png');
background-repeat: no-repeat;
background-position: 50% 0%;
}
#nav_mobile li {
display: none;
margin: 0;
border-bottom: 1px solid #ceced6;
background: #070707;
}
#nav_mobile #current {
display: block;
}
#nav_mobile a {
display: block;
}
#nav_mobile #current a {
background: none;
color: #666;
}
#nav_mobile ul:hover {
background-image: none;
}
#nav_mobile ul:hover li {
display: block;
}
Happy to include jQuery in the code if I need to but I'd like to keep it to just css if I can.
EDIT
I've changed the hover to active and added ontouchstart="" to the body tag. The result is the menue now activates but doesn't stay active long enough for you to select a link.
use the :active pseudoclass. It should work, but in some browsers you need a small hack to make it work : attach an event handler to the touchstart event on the body (ex:<body ontouchstart="">)
You could create 2 separate menus - one for regular screens and one for mobile and do something like this:
#nav_mobile {display: none;}
#media (max-width: 480px) {
#nav_mobile {display: inline-block;}
#nav_regular {display: none;}
}
Related
I'm trying to make a sample website about photography, and as I start with my navigation bar, I have come to the issues of the background color not working. I have tried many things like putting an Id to call my nav on my CSS file. I have also tried using div, nav or even using a class and it won't work. I am sorry if this might be an easy fix but I am new to this.
body , html {
background-color: #F7FDFF;
}
div {
background-color: #000;
}
ul {
list-style-type: none;
}
li a {
display: block;
}
ul li a {
text-decoration: none;
float: right;
text-align: right;
color: black;
padding: 1.5em;
}
li a:hover{
display: block;
background-color: #B5B5B5;
color: #000;
}
.active {
background-color: green;
}
#navbar {
background-color: rgb(18, 171, 209);
}
<div>
<nav id="navbar">
<ul>
<li class="active">Home</li>
<li>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
Because your anchor tags are floated and there are no other non floated elements, your nav element collapsed. To fix these follow below steps.
Create a clearfix class like this. It will stop your nav element from collapsing.
.clearfix::after {
content: " ";
display: block;
height: 0;
clear: both;
}
and add this class to your nav element
Remove the float: right; rule from your anchor element, aka from ul li a selector. Right now, because of this rule, your last element becomes the first menu, aka "Contact" became first menu and "Home" became last. To understand why this happend read this.
Add a new rule float: left; for your li element. If you don't add this rule, your li elements each will take a seperate line, because by default li elements are block level elements. To keep them in the same line you have to add this rule. You can also add display: inline-block to change its default display property from block to inline to keep them in the same line. But there is a small problem with this solution, you will notice a small gap between inline-block elements. If those small gaps are not a problem for your design then go ahead and use display: block; rule, otherwise use float: left;. (To understand the difference hover over the menu next to the active menu)
Add two more rules float: right; and margin: 0; for your ul element. This will move your menu to the right as you intended. margin: 0; is there to remove the extra margins. You can change/delete this rule as per your design.
<!DOCTYPE html>
<html>
<head>
<link href="Css/Stylesheets.css" rel="stylesheet">
<meta charset= utf-8>
<meta name="viewport" content="width= device-width, initial-scale=1.0">
<title>LTphotography</title>
</head>
<style>
body , html {
background-color: #F7FDFF;
}
div {
background-color: #000;
}
ul {
list-style-type: none;
float: right;
margin: 0;
}
li {
float: left;
}
li a {
display: block;
}
ul li a {
text-decoration: none;
text-align: right;
color: black;
padding: 1.5em;
}
li a:hover{
display: block;
background-color: #B5B5B5;
color: #000;
}
.active {
background-color: green;
}
#navbar {
background-color: rgb(18, 171, 209);
}
.clearfix::after {
content: " ";
display: block;
height: 0;
clear: both;
}
</style>`
<body>
<div>
<nav id="navbar" class="clearfix">
<ul>
<li class="active">Home</li>
<li>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</body>
</html>
Your containing li's are collapsing because they contain floated content. You need to add a clearfix to your li items.
.clearfix::after {
content: "";
clear: both;
display: table;
}
<ul>
<li class="clearfix"></li>
// and so on
</ul>
https://www.w3schools.com/howto/howto_css_clearfix.asp
That said, you can also simply remove float: right from your anchor elements. It shouldn't be necessary.
I want to make my navigation menu to be dropdown. I tried different ways, but nothing happend.
This is my HTML code:
<ul>
<li>Home</li>
<li>Geography</li>
<li>English</li>
<li class="icon">
☰
</li>
</ul>
And this is my CSS code:
ul {
padding: 15px;
margin: -10px;
overflow: hidden;
list-style-type: none;
background-color: #171B29;
}
li {
float: left;
}
li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
li a:hover {
background-color: #555;
}
li icon {
display: none;
}
#media screen and (max-width:680px) {
ul.topnav li:not(: first-child) {
display: none;
}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
#media screen and (max-width:680px) {
ul.topnav.responsive {
position: absolute;
}
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;
}
}
When I try to make a dropdown menu, the whole menu becomes very bad. I know that my code is very bad for reading but I will appreciate it if someone have a solution. Thank you in adva
You should try to find answer on http://www.w3schools.com/css/css_dropdowns.asp
Webpage have pretty decent content and its easy understandable.
Have you included the JavaScript too? You are specifying a toggle (myFunction) on click so you need the JavaScript too.
Of course you can just use HTML and CSS for dropdowns, as listed in the post above.
If your issue is that you want the <li> elements to be stacked vertically, you can solve this quite simply using flexbox. Additionally, if you were planning on effecting the "drop-down" effect with just HTML & CSS, you need to add a :hover pseudoclass on the top-level element from which the navigation menu derives. In the example I'm linking to below, I did so on the <ul> element. Alternatively, you'd use the mouseover event in JavaScript.
Additionally, note that the li icon CSS selector you used is not actually a valid selector. There is no actual icon tag in HTML, although many people use the <i> tag as a container for icons.
https://jsfiddle.net/IsenrichO/8t4jhvcs/20/
I have built this Vertical Menu with hidden submenus however I cannot get the submenu to display when the user hovers. How could I go about doing this? Also how can I get the text to be formatted all the way left, since they are lists I can get rid of the bullets, however I cannot get the text to go where the bullets used to be. Also, I am wondering what the best way would be to set the width of the "main-nav". I don't want anything to be over the text except the logo. The body of the site would be next to the navigation. I want the side of the logo to also line up with the left side of the text, and I cannot figure out how to do this. The red border is just for testing purposes (obviously).
Here is the link to my codepen.
[BONUS] I am trying to create my own site from scratch with wordpress and a custom theme. How does one create it so that the logo image is taken from the site identity tab in the customize sidebar? And also just display text if no logo is chosen in the identity bar. Would it be some wordpress php function? Also, I would want the logo to be apart of the main-navigation by default. I have the register_nav_menu() function in my functions.php file and it assigns a menu to Main Navigation, also giving it a class main-navigation. How could I get the logo to by default appear above this menu? Any tips on this would be greatly appreciated. (Wordpress/coding noob here)
HTML:
<div id="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png" class="logo-branding" />
<nav id="site-navigation" class="main-navigation">
<ul>
<li class="active">Overview</li>
<li>About</li>
<li>Submenu</li>
<ul class="sub-menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<li>Contact</li>
</ul>
</nav>
CSS:
.main-navigation {
bottom: 2%;
margin-left: 4%;
display: block;
float: left;
border: 1px solid red;
position: fixed;
overflow: hidden;
width: 15%;
}
.main-navigation li, .main-navigation a {
list-style-type: none;
text-align: left;
text-decoration: none;
color: black;
text-transform: lowercase;
font: 16pt helvetica, sans serif;
padding: 1%;
}
.main-navigation a:hover, .main-navigation .active {
color: tan !important;
font-weight: bold !important;
}
.main-navigation .sub-menu {
display: none;
}
.main-navigation .sub-menu:hover {
display: block;
}
#container {
height: 10000px;
}
.logo-branding {
display: block;
position: fixed;
margin-top: 8%;
transform: rotate(90deg);
width: 15%;
}
JS:
/* No JS */
I believe that this is your desired behaviour?
To do this, you need to place your ul submenu inside the li for the menu item that is displayed. This is the only change I made to the HTML.
You can then add a CSS rule so that when you hover over the li, its ul child becomes visible. i.e: .main-navigation li:hover {display: block; }.
The reason it didn't work when you did .main-navigation .sub-menu:hover is because when it is not being displayed, you cannot hover over it, so the hover state is never triggered. In the rule which I added, it is triggered when you hover over the containing li.
.main-navigation {
bottom: 2%;
margin-left: 4%;
display: block;
float: left;
border: 1px solid red;
position: fixed;
overflow: hidden;
width: 15%;
}
.main-navigation li,
.main-navigation a {
list-style-type: none;
text-align: left;
text-decoration: none;
color: black;
text-transform: lowercase;
font: 16pt helvetica, sans serif;
padding: 1%;
}
.main-navigation a:hover,
.main-navigation .active {
color: tan !important;
font-weight: bold !important;
}
.main-navigation .sub-menu {
display: none;
}
.main-navigation li:hover ul {
display: block;
}
#container {
height: 10000px;
}
.logo-branding {
display: block;
position: fixed;
margin-top: 8%;
transform: rotate(90deg);
width: 15%;
}
<div id="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png" class="logo-branding" />
<nav id="site-navigation" class="main-navigation">
<ul>
<li class="active">Overview
</li>
<li>About
</li>
<li>Submenu v
<ul class="sub-menu">
<li>Item 1
</li>
<li>Item 2
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</nav>
EDIT: I may have made a mistake regarding WordPress, so I deleted that part of the answer so that I do not mislead anyone. E. Shio, however, found a link which explains it almost step by step. I'll summarise what this link says, just in case it someday gets deleted or the page url gets moved.
First, you check if there is a custom logo, for which you use has_custom_logo (). You then output that custom logo with the_custom_logo(). This is a relatively new feature to Wordpress though, so to maintain backwards compatibility, you should check if the function exists with function_exists( 'the_custom_logo' ). If there was no custom logo, you can output the text to display inside an else statement. Here's an example:
if( function_exists('the_custom_logo') ) {
if( has_custom_logo() ) {
the_custom_logo();
} else {
$blogname = get_bloginfo('name');
echo "<h1>$blogname</h1>";
}
}
If you have any questions about the CSS for the menu, I'm more than happy to help! (I'm no expert in Wordpress though, so I probably can't help with any Wordpress specific things, but I can try! XP)
First off, I'm really new to this so sorry if I sound dumb ;_;. Now, I'm trying to make a background color on my list items. Like this site has, black bar with the logo, search bar etc.. I tried wrapping divs everywhere but nothing seems to work.
HTML
<nav class="nav-menu">
<div class="container">
<ul>
<li>About Us</li>
<li>Staff</li>
<li>Schedule</li>
<li>Home</li>
</ul>
</div>
</nav>
CSS
.nav-menu ul {
margin-right: 50px;
}
.nav-menu li {
list-style: none;
display: inline;
margin-left: 30px;
float: right;
color: red;
}
.container {
color: black;
}
http://jsfiddle.net/Hm4KJ/
Set overflow to auto to display everything in the .content div (now everything is hidden because you use float property)
.container {
background: black;
overflow:auto;
}
I guess it is a typo, anyway , you should set background property instead of color to set background color.
Example
if you only want a background color in each list item you can use this one:
.nav-menu li {
list-style: none;
display: inline;
margin-left: 30px;
float: right;
color: red;
background:#000000;
display:inline-block;
padding:5px 10px;
}
http://jsfiddle.net/Hm4KJ/2/
You could add a clearfix after your floating element.
html:
put a
<div class="clear"></div>
after your <ul></ul>
related css:
.clear {
clear: both;
}
and you would need to change color: black; to background-color: black; ;-)
see: http://jsfiddle.net/Hm4KJ/4/
I'm not sure why my hover effect isn't working on my navigation bar, and I was wondering if anyone can point out where I've went wrong?
Here is my html and css:
<div id="nav">
<a class="selected" href="Property%20Advisor.html">Home</a>AboutContact Us
</div>
#nav {
position: fixed;
top: 0;
width: 100%;
height: 7%;
margin: 0;
text-align: center;
font-family: rosario, sans-serif;
background-image: -moz-linear-gradient(#44597F, #021840);
background-image: -ms-linear-gradient(#44597F, #021840);
background-image: -webkit-linear-gradient(#44597F, #021840);
background-image: linear-gradient(#44597F, #021840);
}
#nav a {
display: inline-block;
font-size: 100%;
padding-top: 1%;
padding-left: 2%;
padding-right: 2%;
margin: 0;
border: 0;
padding-bottom: 1%;
color: white;
text-decoration: none;
margin-right: 1px;
background-image: -moz-linear-gradient(#44597F, #021840);
background-image: -ms-linear-gradient(#44597F, #021840);
background-image: -webkit-linear-gradient(#44597F, #021840);
background-image: linear-gradient(#44597F, #021840);
}
#nav homeHover a:hover, onCLick {
background-color: #44597F;
color:orange;
}
.selected {
background-color: #000000;
color: orange;
}
Here is a JSfiddle of my code:
http://jsfiddle.net/VDmh8/1/
http://jsfiddle.net/VDmh8/3/
You need to change:
#nav homeHover a:hover, onCLick {
background-color: #44597F;
}
to:
#nav a:hover {
background-color: #44597F;
background-image: none;
}
because for one, #nav homeHover a:hover would select a hovered upon a element within an element with tag name homeHover within #nav, which won't target the a elements that you want.
Also, you need to reset the background-image property that you set for your unhovered a.
You just messed up your CSS target.
JSFiddle
You're trying to change #nav a I presume, so all you need to do is use the CSS selector - #nav a:hover.
Setting a background gradient for both your nav and link elements is generally a bad idea. The two gradients will attempt to fit into different sized spaces and clash together. Instead, try creating a nav with a gradient, and then making transparant buttons above the nav, so you don't need to specify a new gradient. This is a bit difficult to explain, so check below:
For the navigation button, just leave out the background entirely when it isn't being hovered, and it will show the #nav color behind, like here.
As a more general example:
#nav{
/* gradients here! */
}
.button /* not hovered */
{
/* Don't set a background color - it will be transparant. */
}
.button:hover /*the same button when it's hovered. */
{
background: #123456;
}
(Also PS: never use something like height: 7%; for the nav. It ends up scaling improperly.
Use a definite height, like height: 48px.
If you really want to make a responsive website, a CSS Media Query would be better suited in this situation.
Why do you have a HomeHover in your css? That way, it looks for #nav, then a HomeHover tag inside the nav and then the anchor tag to match.
nav a:Hover will do.
The background-image seems to be drawn over the background-color. You need to set the background-image to something else on the hover.
nav a:hover {
background-color: #44597F;
background-image: none;
}
Fiddle