I have the following code: https://jsfiddle.net/u8db2j75/1/ and it works fine, I have the effect I wanted - a picture and some text next to it. But now I want to add another component, a navigation bar - and I want to add it on top of the page. So what I followed the example given here http://css-snippets.com/simple-horizontal-navigation/ and I created the code like this:
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="tutorials"><a class="active" href="#">Tutorials</a></li>
<li class="about">About</li>
<li class="news">Newsletter</li>
<li class="contact">Contact</li>
</ul>
</div>
https://jsfiddle.net/u8db2j75/2/ however, after modifying css as well -as you can see - the effect is far from what I expected... What did go wrong here?
Give your .nav ul and .nav a min-width of 100%.
Example:
.nav {
min-width:100% !important;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
position: absolute;
top: 0;
padding: 0;
margin: 0;
min-width: 100%;
}
https://jsfiddle.net/u8db2j75/4/
I don't have 50 reputation to comment the answer above, but:
List item needs to be displayed inline, or floated to the left so the result will be a horizontal navigation as per the examble shown in the issue.
Related
Inside my navbar, are my links. I am trying to set a media query where the links stack and center after clicking my hamburger menu with primely CSS flex-box. What do I need to change to my code to achieve this?
I was using float, absolute and relative positioning first. At this time my navbar was working almost perfectly. However, I had to place my link with its href="home," outside of the div with class "options," so that it would remain visible after my screen size approached my media query. The positioning of my links became awkward after this so I turned to CSS flex-box.
<html>
<div>
<nav class="navbar">
<label class="menu" for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="main"><li class="home">TechReality</li></div>
<div class="options">
<li class="news"></li>
<li class="products">Categories</li>
<li class="trends">Trending</li>
<li class="forum">Customer Forum</li>
<li class="about">About Us</li>
</div>
</div>
</nav>
#media only screen and (max-width: 1135px) {
.navbar .options .home{
visibility: visible;
}
.menu {
display: block;
cursor: pointer;
}
.navbar.options{
text-align: center;
visibility: hidden;
flex-basis: 100%;
flex-wrap: wrap;
}
.news, .products, .trends, .forum, .about {
border-top: 1px solid rgba(255,255,255,0.3);
border-bottom: 1px solid rgba(0,0,0,0.1);
margin: 0;
}
ul:last-of-type a {
border-bottom: none;
}
#toggle:checked + .options {
visibility: visible;
}
}
My full code can be seen in this codepen snippet https://codepen.io/ashu121805/full/XvgRqP.
There's a lot to discuss here, but I want to point out three major problems that will get you 90% of the way there, then you can tweak the styling as you see fit afterwards.
1. Fixing invalid HTML
You have an extraneous closing div tag inside of <nav class="navbar"> that should be deleted. You also have li tags inside of div, which is incorrect; an li should always be the child of either an ol or a ul. Fixing those, and deleting the extra html opening tag from the start of your snippet above, we get this:
<div>
<nav class="navbar">
<label class="menu" for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<ul class="main">
<li class="home">TechReality</li>
</ul>
<ul class="options">
<li class="news"></li>
<li class="products">Categories</li>
<li class="trends">Trending</li>
<li class="forum">Customer Forum</li>
<li class="about">About Us</li>
</ul>
</nav>
</div>
(Also, just a note: In CodePen, you don't need to include the html or body tags, nor the head section. You can also delete the script tag you have and just use the JS panel in the editor view.)
2. Making the hamburger menu work
This one is very easy to fix. Right now you are toggling your menu's visibility with this rule:
#toggle:checked + .options {
visibility: visible;
}
Problem is, the + selector only selects the immediately next sibling of an element. Since .options isn't right after #toggle, the selector doesn't work.
Instead, you can use the ~ selector, which will select all siblings after an element that match the selector:
#toggle:checked ~ .options {
visibility: visible;
}
3. Basic CSS cleanup
Once you get this far, you'll have a menu that toggles when you click the hamburger, but it'll look wonky. There's a few main things we need to do:
Make our lists (ul) not actually look like lists.
Make the links stack on top of each other vertically.
Position the links in a logical place, like right below the nav bar on the left side of the screen.
#1 can be accomplished simply:
ul {
list-style: none;
padding-left: 0;
}
#2 can be accomplished by adding these additional styles:
.navbar .options {
flex-wrap: wrap;
}
.news, .products, .trends, .forum, .about {
width: 100%;
}
Also note that you currently have a typo in your media query styles – there should be a space in .navbar .options where you currently have none.
#3 is a little more involved, but a good start would be to add these styles inside your media query:
/* force .options to wrap below since it has flex-basis: 100% */
.navbar {
flex-wrap: wrap;
}
/* remove the default margin-bottom on lists – or you could do this in your main styles above your media query */
.navbar .options,
.main {
margin-bottom: 0;
}
From there you can adjust things as you like.
I'm trying to make a sidebar navigation list containing another list whose contents show/hide when clicked. For the li containing the collapsible list, I put in a custom list-style-image (actually, two that are toggled between with JS when clicked.) The problem is that the custom image is rendering on the edge of the page instead of in line where a regular bullet point would be. The image has a transparent background, so that's not the problem. Maybe it's something with how I floated the div to the left?
Here's my HTML and CSS and a screenshot of how it's displaying.
Code snippets (css/html):
#sidebar{
position: fixed;
float: left;
width: 20%;
background-color: green;
}
#main{
float: right;
width: 75%;
background-color: blue;
}
#songs{
margin-bottom: 0;
}
.song{
list-style: decimal;
}
.songclosed{
display: none;
}
.closed{
list-style-image: url("../images/closed.png");
}
.open{
list-style-image: url("../images/open.png");
}
<div id="sidebar">
<ul>
<li>
<p>Home</p>
</li>
<li>
Info
</li>
<li id="openclose" class="closed" onclick="openclose()">
<p id="songs">Songs</p>
<ol>
<li class="song songclosed">
Song 1
</li>
<li class="song songclosed">
Song 2
</li>
<li class="song songclosed">
Song 3
</li>
</ol>
</li>
</ul>
</div>
Image--See the little black triangle on the left?
I've tried list-style-position: inside and overflow: hidden. Both made a difference, but neither worked properly.
Final note: The images are bigger (100x100) than a regular bullet point so that may be a slight problem, but I can edit them down and see what changes if someone can tell me how big a regular bullet is.
I'm trying to create a drop-down menu. I had it working for a minute.
My code is as follows:
<nav id="nav">
<ul>
<li class="subNav">Some Page1
<ul>
<li>Related Page1<li>
<li>Related Page2<li>
</ul>
<li>
</ul>
</nav>
My CSS is as follows:
#nav li.subNav ul{
display: none;
}
#nav li.subNav:hover ul{
display: block;
}
I have three CSS files that relate to this page. One is basically a web-kit for font, and the other two are bowlerplate.css and my custom file customFile.css. The tag <#nav li.subNav:hover ul> show up in customFile.css, and <#nav li.subNav ul> diplays in bout custom and boilerplate when I check computed styles.
There are two things I wish to fix; the submenu lines up horizontally (I need it to go vertical) and the submenu isn't hidden. I had to nest /li tag around the ul, so that took care of one problem (they're now aligned under the parent tag).
I also noticed that the height and width have changed on my parent li. I understand it expanding to accommodate the list items, but the increased height seems a little odd.
Here's my solution to the above problem
#nav li.subNav:hover ul li {
visibility: visible;
width: 171px;
padding: 0;
cursor: pointer;
float: none !important;
display: block !important;
}
I have made a horizontal navigation bar using styles, but I've encountered a major issue... Since <li> is a block element, I can't align it using text-align:right, which makes me unable to align it properly. I've tried using the display:inline; syntax for the list-item element, but that doesn't make any difference either (which makes sense actually).
My question being, is there any way of aligning horizontal <li>, without having to use float:right;? I want it to fit the current list's format (which I've adjusted to fit a parent div), and using float isn't really a good or safe method. Here's a screenshot of what I got so far (layout is slightly messed up due to recent addition of image). As you can see, I have managed to get the "My page" and "Log out" properly placed, but as soon as I add something more "complex" (like the "+", which now is placed in the normal list), it gets screwed up... I really don't get how other websites manages to get this right.
You must define text-align: right for the containing element
HTML:
<ul class="nav">
<li class="menu">1</li>
<li class="menu">2</li>
<li class="menu">3</li>
<li class="menu">4</li>
<li class="menu">5</li>
</ul>
CSS:
.nav {
text-align: right;
}
.menu {
display: inline;
}
JSFiddle
You can split the menu to a left and right part, if you like. Add or remove padding and margin as needed
HTML:
<ul class="nav left-nav">
<li class="menu">1</li>
<li class="menu">2</li>
<li class="menu">3</li>
</ul>
<ul class="nav right-nav">
<li class="menu">4</li>
<li class="menu">5</li>
</ul>
CSS:
.nav {
margin: 0;
padding: 0;
}
.left-nav {
text-align: left;
}
.right-nav {
text-align: right;
}
.menu {
display: inline;
}
JSFiddle
Here you go i think this is what you are looking for:
jsfiddle.net/Sdw5h/
I have a problem resizing or spacing a navigation menu as seen on the pic below. If any body knows how, please inform me. I just wanna resize nav menu box so the first one become like the second one (to resize it smaller).
HTML
<!--MENU-->
<nav id = "main-nav-menu">
<ul class="sf-menu">
<li class="active">Home
<li>ABOUT US
</li>
<li> SERVICES
</li>
<li>OUR PRODUCTS
</li>
<li>OUR EQUIPMENTS
</li>
<li>MACHINE LIST
</li>
<li>CONTACT
</li>
</ul>
</nav>
<!-- end menu -->
CSS
#header .menu select {
border: 1px solid #CCCCCC;
display: block;
left: 4px;
position: relative;
top: 205px;
width: 250px;
}
#header .menu select {
display: block;
width: 200px;
}
this can be achieved with some simple css rules. in your stylesheet, or style block if you're not using a style sheet, you need to set max or min widths, as well as padding for your list items.
add something like:
li{max-width:60px;padding:4px;}
or
.sf-menu li{max-width:60px;padding:4px;}
or
main-nav-menu ul li{max-width:60px;padding:4px;}
each of these will set the maximum width of your menu items to 60px. Change this value to suit your needs. This means there will be a standard width for all items. You could also set a fixed width or min-width.
li{min-width:60px;width:100px;max-width:150px;}
you can also add padding to keep a consistant look.
li{padding:4px 8px;} /* top & bottom padding of 4px, left & right padding of 8px */
an example of this code - http://jsfiddle.net/kcdP4/
hope this helps