I'm working on a project(using bootstrap) and I can't seem to figure out why my nav is still stacked up instead of being laid out horizontally. I've tried just about everything I can think of and even sought help online where I'm learning to code but they couldn't figure it out either. They told me it should be working and in fact it does work in their code editor, it just doesn't work on my computer which is where the files are located since I don't have web hosting and I'm just learning. I also noticed that in my browser the nav pull-right works and the links are on the right hand side(although they're still not horizontal) but when I ran it through here where it says "run code snippet" the nav appears right underneath the img placeholder, don't know if that means anything but I thought I'd include that bit of information.
header nav ul{
display: inline-block;
}
<header>
<div class="container">
<div class="row">
<img id="logo" src="http://placehold.it/150x150">
<nav>
<ul class="nav pull-right">
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
enter image description here
Do you mean you want to make the navigation to align horizontally?
Then you can try using this
header nav ul li {
display: inline-block;
}
working example here.
The reason your method doesn't work is because you apply to ul instead of the li element.
Related
I'm trying to make my website with Wordpress.
I wanted to add my custom horizontal menu, with plain CSS and HTML since plugins can't satisfy me.
This is my HTML code:
<div id="provamenutop">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
and this is my CSS:
#provamenutop {background-color:#333; width:90%; line-height:100%;}
#provamenutop li {position: relative; float:left; list-style: none; font-family:verdana;}
#provamenutop li a {display:inline-block; text-decoration:none; padding: 20px; color: white; background: #333; transition:.4s;}
#provamenutop li a:hover {background: #111;}
On my local computer, this looks right:
https://gyazo.com/d5b38f6cc1c7857dbe37945e2d8b5002
But here's what it looks like on my website, using a custom theme called Sportexx:
https://gyazo.com/5ccb7e944b627244a7d3ac8344471b28
I know this could be some CSS already existing in the theme interfering with mine, but what could I do to avoid the problem? (The space in between one Home button and the other is also clickable)
Thank you for reading.
When you use Chrome Developer Tools or Firefox Firebug and inspect the HTML, you will see the following output for your menu on the web site http://www.ferrari.co.it/athletic/
<div id="provamenutop">
<ul>
<li>Home</li><a href="#">
</a><li>Home</li><a href="#">
</a><li>Home</li><a href="#">
</a><li>Home</li><a href="#">
</a><li>Home</li><a href="#">
</a></ul><a href="#">
</a>
</div>
So the problem here is not CSS, but faulty HTML. You have two additional <a href...></a> tags. One before the Home and one outside the closing </li> tag and also one outside the closing </ul> tag.
If you fix your HTML, so that it looks like this, it will actually work:
<div id="provamenutop">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
It's definitely a CSS conflicting issue. Do you have a link so we can check it in firebug? Should be a very easy fix. When I run your html and css in JSFiddle it works fine.
I'm not sure what you mean by On my local computer, this looks right:
But here's what it looks like on my website, using a custom theme
called Sportexx:
Are you not using sportexx on your local computer? If it's working without the theme and not working with the theme it's the CSS. Just open up firebug in your browser and look at the css around the menu. You should be able to adjust it right there and remove the problem. Then go to your stylesheet and make the changes accordingly.
After seeing your comment. It's the html. Just delete the other links.
I'm trying to make my current CSS navigation responsive for mobile devices.
I currently have it set up with a media query so that when the screen width falls below the specified size it changes to block form (stacked) and a menu icon appears on the right hand side of the logo (to later be made into a button).
The problem I'm currently having is that the drop down menu which is used for my second link in the navigation, is causing a gap to appear between the second and third link (as if the drop down content is taking up the space whilst hidden).
I've tried looking for solutions but can't seem to find the right answer for my particular setup. Basically, the link "How It Works" should sit right beneath "Sections" when on mobile.
http://jsfiddle.net/fc45c7p5/
<a href="#">
<img class="logo" src="images/logo.png" alt="Logo" style="width:330px;height:100px"/>
</a>
<div id="menu-icon"></div>
<br></br>
</div>
<div class="navbar">
<ul class="navbar cf">
<li>HOME</li>
<li>SECTIONS
<ul>
<li>RETAIL</li>
<li>HOTEL</li>
<li>RESTAURANT</li>
<li>SHOPPING</li>
</ul>
<li>HOW IT WORKS</li>
<li>OUR EXPERIENCE</li>
<li>TESTIMONIALS</li>
<li>NEWS</li>
<li>CONTACT US</li>
</ul>
</div>
Don't take too much note of the media query max-width of 1008px, I'm aware this isn't standard mobile size, it's just temporary whilst I get it working first.
Any help regarding this is really appreciated.
visibility keeps your elements there without displaying them. You should use display:none when you do not want show the space the hidden element takes. Use display:block to show them again. Add some CSS transitions to the height of the a elements to make the reveal somewhat smoother.
Here : http://jsfiddle.net/6eshy7n2/
Add the following.
ul.navbar ul li { float: none; width: 100%; display:none;}
ul.navbar li:hover > ul li{display: block;}
You have to make the lis inside the uls actually not display when the parent li is not being hovered. When it is hovered you then change the display value to block to make it visible.
I did some searches on the matter but seem to receiving mixed answers and I'm not entirely sure how to go about this given my limited coding knowledge.
I downloaded a website template called Brushed by Alessio Atzeni (mentioned for easier reference). The template is fantastic but unfortunately it does not come with dropdown functionality so I looked up a couple of tutorials and have managed to create my own.
<div class="sticky-nav">
<a id="mobile-nav" class="menu-nav" href="#menu-nav"></a>
<div id="logo">
<a id="goUp" href="#home-slider" title="rando"></a>
</div>
<nav id="menu">
<ul id="menu-nav">
<li class="current">Home</li>
<li>Intro</li>
<li class="dropdown">Our Services
<ul id="menu-nav-dropdown">
<li>Social Media</li>
<li>Graphic Design</li>
<li>Development</li>
</ul>
</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
This is the HTML for index.html for the navbar, when I hover over "services" the dropdown appears and each individual element highlights as a result of me hovering but when I click it nothing happens. However, if I right click and "open in new tab" that proper page is generated.
I chose not to include the CSS to prevent cluttering the post, but if you need any other information I'll gladly provide it as soon as possible. Does anyone know what the issue might be? Thank you in advance.
EDIT: here is the http://jsfiddle.net/tuvon83p/1/ it doesn't look good at all but I believe the functionality is there and working properly (you just need to hover over to the right to see the links because there isn't a background).
Try
nav ul li ul li a{
position: relative;
top:0;
left: 0;
z-index: 999;
display: block;
}
basically: In the navigation, locate all ul, locate all li, locate all ul, locate all li, and select the a and it should go to the unclickable and put it above all things. There may be something above it?
first question here so please go easy on me :).
I started studying css3 two weeks ago, and now i'm trying to build a pure css3 dropdown menu system.
I got my menu built like this
<body>
<div id="column">
<div id="header">
<heading1>Header.</heading1>
</div>
<div id="menu">
<menu-element class="chosen"> Home page</menu-element>
<menu-element>Project</menu-element>
<a href="Gallery.html">
<menu-element> Gallery
<ul>
<li>1</li>
<li>2</li>
</ul>
</menu-element>
</a>
</div>
....
</body>
I'm working by integrating the css code i studied on a tutorial to work on my css structure.
The step i'm having problem is is the first: hiding the submenu items when not on mouseover.
I tried with
menu-element ul
{
display: none;
}
to hide only ul elements nested in menu-element elements, but it didn't work.. and the ul and its li childs are still there. Could anyone help me out by telling me where i'm wrong?
Your only problem is that you have invalid html tags, (<menu-element> and <heading1>).
Instead of <menu-element> use <nav>, and instead of <heading1> use <h1>.
I think that you are doing your tests in IE, and in some of the old compatibility modes.
In Chrome, Firefox, and IE 11, your code works
fiddle
code fragment to make SO happy:
menu-element ul
{
display: none;
}
It is true that your elements are not valid HTML types, (and of course you should use valid ones!!) but HTML5 compliant browser are quite liberal about that.
Best practice in creating navigation menus is to use an unordered list for the entire menu. This way if styles are not loaded (for whatever reason) it still reads properly. As other have mentioned, and are not valid tags.
I would suggest using the model below:
<nav>
<ul>
<li>Home</li>
<li>Project</li>
<li>
Gallery
<ul class="gallery">
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
</nav>
And for the css you could use
ul.gallery{
display: none;
}
or
nav ul li ul{
display: none;
}
I use the second option when creating pure css dropdown menus as it is easier to follow along as you create more complicated menus. It also allows you to hide all submenus rather than just the one with the class of gallery.
Here is the jsfiddle for it http://jsfiddle.net/8PcxE/
<div id="container">
<div id="header">
<div id="nav-container">
<ul id ="nav-list">
<li id=nav-title>lymbo</li>
<li>Playmaps</li>
<li>Map</li>
<li>About</li>
<li>My Account</li>
<li>Log Out</li>
</ul>
</div>
</div>
It is fine on a wider page, but when I run it on a small page everything is cramped and the options get pushed together making a zipper-like pattern.
My other problem is when I type something in my headers or paragraphs it will be at the top and intersecting with my navigation bar making it look like a mess.
My goal is to make a sort of "gradient" looking navigation bar hence the shadows. But that also doesn't seem to look right. If someone can give me some input on that, it would be much appreciated.
I found that after I changed my nav-container CSS to position: relative from position: fixed it works out. Are there any negative effects of doing this?
Since you've changed all the <li> to inline, the simplest solution would be to prevent wrapping on the <ul>:
#nav-list {
white-space: nowrap;
/* ... */
}
http://jsfiddle.net/mblase75/Lt72p/