I am trying to get a little graphic to designate which page the viewer is on with css, but it just won't highlight. Here is my code:
HTML:
<ul class="side-nav">
<li><span>Home</span></li>
<a href="http://www.cieloazulsantafe.com/sample-page.html"><li>
<span>Sample Page</span></li></a>
</ul>
CSS:
ul.side-nav span{
margin-left: 50px;
text-decoration: none;
color: #fff;
}
ul.side-nav a li{
background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad.png');
list-style: none;
height: 41px;
width: 250px;
line-height: 2.0;
text-decoration: none;
}
ul.side-nav a li:hover{
background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');
}
ul.side-nav a li.current-menu-item{
background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');
}
a{
text-decoration: none;
}
Seems straightforward, but I just can't get the background to change. I know its because its the li element, but I guess the "current-menu-item" order is wrong.
Url : http://cieloazulsantafe.com/nav-test.html
Thanks in advance.
You will have to name the body (give it an id) and the li tags, and refer to them respectively in your css. This is the easiest, pure css way.
HTML
<body id="home-body"> // ... on your home page
...
<body id="about-body"> // ... on your about page
Your nav
<li id="home-menu">Home</li>
<li id="about-menu">About</li>
CSS
body#home-body li#home-menu, body#about-body li#about-menu { // style of the active menu item }
You might want to have a look at my answer I provided on the following question: How can I use one Nav Bar code on multiple pages, BUT have the current page highlighted?
EDIT: This is the "pure css" way; but depending on your needs, there might be other ways down this road.
CHECK THIS FIDDLE http://jsfiddle.net/luckmattos/aN2ny/
Your HTML and CSS were broken:
HTML
<ul class="side-nav">
<li>Home</li>
<li class="current-menu-item">Current</li>
</ul>
<a> has to be inside the <li>, put the text properties on the <a>. Most important you forgot to put the class current-menu-item on the current <li>.
CSS
ul.side-nav {
margin-left: 50px;
text-decoration: none;
padding:0px;
list-style: none;
width: 250px;
}
ul.side-nav li{
padding:0px;
margin:0px;
display:block;
background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad.png');
height: 41px;
cursor:pointer;
}
ul.side-nav li a {
margin:0px;
display:block;
padding-left:50px;
text-decoration:none;
color: #fff;
height:41px;
line-height:41px;
}
ul.side-nav li a:hover,
ul.side-nav li.current-menu-item {
background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');
}
There are several minor changes, take a look at the code.
Related
I am trying to follow some online HTML CSS course and tried to code an website like this website
https://www.w3schools.com/w3css/tryw3css_templates_band.htm#
When I tried to see the hided button Merchandise, Extras, Media 's information, I saw the Elements and I saw that the padding is 8px 16px, as you can see in this picture
But when I coded like them, used their information, the block became small. Like this picture
Here is some of my code
<div id="header">
<ul id="nav">
<li>HOME</li>
<li>BAND</li>
<li>TOUR</li>
<li>CONTACT</li>
<li>
<a href="">MORE
<ul class="subnav">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</a></li>
</ul>
</div>
My styles.css file is here
#nav li {
position: relative;
}
#nav > li {
display: inline-block;
}
#nav li a {
text-decoration: none;
line-height: 46px;
padding: 0 24px;
display: block;
}
#nav li:hover .subnav {
display: block;
}
#nav .subnav {
/*display: none;*/
position: absolute;
background-color: #fff;
top :100%;
left :0;
}
#nav .subnav a {
color: #000;
padding: 0 16px;
}
My question is, why I set padding exactly they display but it became fell in ?
Thank you very much for your time.
If I understand correctly, your question is why the widths of your <li> elements are shorter than the example.
In short, add min-width: 160px; under your #nav .subnav a CSS selector.
#nav .subnav a {
min-width: 160px;
color: #000;
padding: 0 16px;
}
Explanation:
As in your screenshot, the original example has CSS "width: 100%" which I believe you've tried but didn't work as expected. In fact, that 100% means it will follow the father <div> width (shown in following screenshot), which is set to "min-width: 160px;". Instead of following the exact structure, you may want to keep it simple, so just add "min-width" to <a>!
CSS of example page
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)
I got a problem with the CSS hover-event.
I created a page with a navigation bar at the top. For compatibility reasons I had to move away from nav and changed it to a simple div. (nav is not known in IE8, but it still has to be working there.)
<div class="nav">
<ul>
<li> <a> Something </a>
<ul>
....
</ul>
</li>
....
</ul>
</div>
That resulted in making the hover on my navigation bar not working anymore. But it's not, that nothing is working, only the first one of the following lines does not do it's job anymore. The background simply does not change.
.nav ul li:hover { background: #BFBFBF; } - not working
.nav ul li:hover > a { color:#FFFFFF; } - working perfectly fine
.nav ul li:hover > ul { display:block; } - working perfect as well
.nav ul {
background: #404040;
list-style:none;
padding:0 20px;
margin: 0;
height: 30px;
text-align:left;
display:block;
}
I double checked basically everything I know, suspected or found, that could be the source of my issue, but I was yet unable to get it back working.
I tried using background-color instead of background, without success.
I want to do it without having to use anything besides HTML and CSS, which should be possible, since it worked, when I still was using the nav-element.
I am noob to css, maybe I'm missing some really simple detail.
Thanks in advance.
Rather than modifying the nav bar content, just try to change the animation for the thing which you are pointing at, I mean that rather than hovering the <li> component just make the text in it hovering
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .2s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
Try defining the <a> element and hovering it as the whole <li> won't hover with multiple overlapping CSS formats
See I created something in html. And your code is working.
Its good if you can paste your html
<head runat="server">
<title></title>
<style type="text/css">
.nav ul li:hover {
background: #BFBFBF;
}
.nav ul li:hover > a {
color: #FFFFFF;
}
.nav ul li:hover > ul {
display: block;
}
</style>
<nav class="nav">
<ul>
<li>
<a>Li 1</a>
</li>
<li>
<ul>
<li>Li 2
</li>
</ul>
</li>
<li>Li 3
</li>
</ul>
</nav>
I'm trying to create nav bar similar to that of Uber's site. Where there's a menu button on the left, logo in the center, and then log in and sign up are on the right.
I used and div container="pull-right" and still couldn't get the Title to be center. The buttons won't be stylized much more than what they are since they will be on a white background.
<div class="nav">
<div class="container">
<ul>
MENU</button></li>
TITLE</button></li>
SIGN UP</button></li>
LOG IN</button></li>
</ul>
</div>
</div>
.nav{
color: #5a5a5a;
font-size: 15px;
font-weight: normal;
padding: 15px 15px 5px 5px;
word-spacing: 3px;
}
.nav li {
display: inline;
}
.nav button {
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline: none;
}
.nav a{
color: inherit;
}
Here's my Jsfiddle: https://jsfiddle.net/tokyothekid/r19y23ep/1/
you can try this fiddle
demo
in this i have manage the structure of your li and as per your description i make a design i hope it may help you
.col1
{
margin:0;
padding:0;
float:left;
width:50%;
}
Quick answer
If you want something like the website for Uber, you probably need to separate the Menu from the buttons on the right side.
Other notes
Also, HTML5 has specified special tags so code is more readable and organized, such as the <nav> tag to hold your main menu. <div> doesn't communicate the purpose of the container.
To do what you want, here is a to-do list:
fix your bugs (<a href="somewhere"<li><button>foobar</button></li></a> actually is an error because of the lack of right bracket > at the end of your opening <a> tag)
separate your elements into a menu, a title, and a couple of user account buttons
The code
Here is a good example of how you could restructure your HTML:
<h2 class="top-title">Title</h2>
<nav>
<button id="toggle-menu">Menu</button>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</nav>
<div class="user-buttons">
<button>Log in</button>
<button>Sign up</button>
</div>
This is a quickly hacked bit of CSS you might use to start with:
h2 {
display: inline-block;
width: 100vw;
text-align: center;
margin: 0;
position: absolute;
z-index: -1;
}
nav {
float: left;
}
nav ul {
list-style-type: none;
padding: none;
position: absolute;
}
nav ul a {
text-decoration: none;
text-transform: uppercase;
color: inherit;
}
div.user-buttons {
float: right;
}
Add some Javascript, and voila:
$(function() {
$("nav ul").hide();
$("#toggle-menu").click(function() {
$("nav ul").toggle();
});
});
JSFiddle example.
I cannot seem to get my menu items to be clickable...they work in IE, but not Firefox or Chrome. I can also get them to work on my iPad in Chrome and Safari, but not when I hold the iPad in landscape mode. Very weird.
HTML:
<div id="options" class="clearfix">
<ul id="filters" class="option-set clearfix" data-option-key="filter">
<li>All</li>
<li>Tech</li>
<li>Social</li>
<li>Health</li>
</ul>
</div>
And the CSS:
#options ul {
list-style: none outside none;
text-align: center;
margin-bottom: 25px;
margin-top: 10px;
}
#options li {
display: inline;
}
#options li a {
color:#666666;
font-size: 15px;
padding: 10px 10px;
text-decoration: none;
text-transform: uppercase;
line-height: 34px;
}
#options li a:hover {
color:#3B5998;
}
#options li a:active {
color:#3B5998;
}
#options li a.selected {
color:#3B5998;
}
Any help would be great, I am not the best at HTML and CSS so I appreciate any insight.
My site is www.pinstart.us
Cheers.
Your ".navbar-fixed-top" div is overlapping the "#option" bar !
you can verify this by setting:
.navbar-fixed-top{
z-index: -5;
}
edit: this wont ruin the site looks.
#options{
position:relative;
z-index: 9999;
}
hope this points you on the right direction !
Seems to be working fine for me but you could try making your 'a' tags display: inline-block
#options li a {
display: inline-block;
}
Have you tried placing your
<a href...>
tags outside of your
<li>
tags instead of inside them? I know that sometimes this makes a difference for me.