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.
Related
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)
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 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.
I am using the following (simplified) code to vertically center a hyperlink within a UL. I know it may appear strange that I am applying the style to the hyperink rather than the li, but I require the entire list element to be clickable.
My code works just as intended, however as you can see on this jsFiddle the vertical centering is a little off.
Can anyone advise why this is? Thanks in advance.
HTML
<ul>
<li>
<a href="/">
<label>Foo</label>
<span>Bar</span>
</a>
</li>
</ul>
CSS
ul
{
list-style: none;
}
ul
{
height: 100px;
line-height: 100px;
}
li, li a
{
display: inline-block;
}
li a
{
line-height: 18px;
padding: 5px 10px;
color: #FFF;
text-decoration: none;
}
li label
{
float: left;
}
li span
{
float: right;
}
The line-height on your "ul" is whats moving the link up and down, if you increase it to about 120px it centers it.
Get rid of display:inline-block; on li a.
Demo