I've created a responsive fixed Top Navigation Bar for a site I'm working on. I'm teaching myself CSS and as of this moment, I only have 2 weeks experience with the language.
Fiddle Link can be found here.
/* BASIC STYLE START */
body {
margin: 0;
background-color: #FFFFFF;
font-family: 'Titillium Web', Arial, sans-serif;
}
/* BASIC STYLE END */
/* NAVIGATION BAR START */
ul.topnav {
margin: 0;
padding: 0;
background-color: #2F2E2E;
overflow: hidden;
list-style-type: none;
width: 100%;
position: fixed;
top: 0;
}
ul.topnav li {
margin: 0;
padding: 0;
float: left;
}
ul.topnav li a {
margin: 20px;
padding: 0;
color: #FFFFFF;
overflow: hidden;
display: block;
text-align: center;
text-decoration: none;
font-size: 10px;
font-weight: 400;
letter-spacing: 3px;
text-transform: uppercase;
}
ul.topnav li a:hover {
color: #B0AAA9;
transition: 0.3s;
}
ul.topnav li a.active {
color: #B0AAA9;
}
#media screen and (max-width: 800px){
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* NAVIGATION BAR END */
My issue is with aligning the links within the Nav Bar. I want to align the below accordingly.
Allegiance Title - Left side of Nav Bar
Home-FAQ Links - Center Column of Nav Bar
Register & Login Links - Right of Nav Bar
The problem I face is that I can't seem to actually manage to align them properly. I figured out how to change the class in HTML and move the Register & Login links to the right, but I can't move the Home-FAQ links to the centre. Also, when I do change values in padding / margin in the Nav Bar, the responsive Mobile menu changes with the links all over the place (non-centered).
I would appreciate any help as I'm very new to this. Also, please let me know if I have redundant code in the stylesheet.
Ultimately, I want to create one of those 3 column parallax scrolling sites with this Nav Bar sitting on top. I was going to use a downloaded template, but there is no point as I won't learn anything.
The issues are:
You cannot have a <div> directly inside <ul>. It's totally invalid.
The rule ul.topnav li.right, ul.topnav li is contradicting with float: none;
What you need to do is, create this rule:
ul.topnav li {float: left;}
You should be all set. If you need parallax scrolling, it definitely requires JavaScript.
Preview
Fiddle: https://jsfiddle.net/9go9x2ug/
Related
I cant for the life of me figure out how to edit the style.css file to edit the width of the top navigation bar. our website as you can see, the top nav bar is too large, all the items should fit on one line. Here is the code:
.top-nav {
background: #151515 none repeat scroll 0 0;
}
.nav-top li {
display: inline-block;
}
.top-nav a,.nav-video a {
color: #fff;
display: block;
font-family: josefin_sansbold,sans-serif;
font-weight: 200;
padding: 25px 15px;
text-transform: uppercase;
position:relative;
font-size:30px;
}
.top-nav{
text-align: center;
}
div#Video_Categories {
padding: 10px 5px;
background: #fafafa;
}
#nav a {
color:#004282 !important;
font-size:18px !important;
}
There is also a chance that I may be looking at the relavent code for the top menu bar. I could attach the full css file here if possible. Bare with me this is my first post!
If you have the ability to override your current styles or edit them, then you can change the width of the class .container_24.
.container_24 {
max-width: 1200px;
}
Changing that gives me this:
How do a create menus with pure css that are evenly spaced and the li elements take the entire ul space?
I followed this solution to create the menus that are evenly spaced out: https://stackoverflow.com/a/17951253/757955
I want the li elements to take up all the area of the ul element. I have a separator image I want to put between the menu items. Also I want people to be able to click anywhere in the menu item and be taken to that page.
Here is the js fiddle: https://jsfiddle.net/prusikknot/btp6Lkos/
Notice how the red and green boxes don't touch. I want the red and green boxes to touch between each other at the midway point between the menus.
There will be a variable number of menus and the menu names will vary in length. I'm targeting IE8+ and the latest version of the other major browsers but the old IE part may get dropped.
Here is the html:
<nav id="idMainNav">
<ul>
<li>ASDF</li>
<li>QWER</li>
<li>ZXCVB</li>
<li>UIOP</li>
<li>HJKL</li>
<li>VBNM</li>
<li>TYUI</li>
</ul>
</nav>
Here is the css:
#idMainNav{
width: 900px;
}
#idMainNav ul {
margin: 0px;
padding: 0px;
text-align: justify;
line-height: 0;
background-color: #e9e8e8;
}
#idMainNav ul:after {
content: '';
display: inline-block;
width: 100%;
list-style: none outside none;
}
#idMainNav li {
position: relative;
display: inline-block;
line-height: 100%;
text-align: center;
font-size: 15px;
font-weight: bolder;
cursor: pointer;
}
#idMainNav li:first-child {
padding-left: 10px;
}
#idMainNav li:last-child {
padding-right: 10px;
}
li {
background: green;
}
li:nth-child(odd) {
background: red;
}
#idMainNav a {
color: #000000;
height: 59px;
line-height: 59px;
text-decoration: none;
}
The thing about display:inline-block; is that it behaves like text and creates white space between elements. To counteract this, make the inline-block parent element have a font-size:0; (in this case the ul) and then reset the li to a font-size value not relative to the parent (since it's now 0).
Also, you don't really need to set justify to anything here, you just need to explicitly state the width of all the lis. In my test, setting the li to width:13.95%; worked nicely but it depends on the number of lis.
I have a purely .css driven menu. Currently, I have the flyout on the sub-sub menu appearing at 180px. This obviously doesn't work because as soon as menu text that exceeds 180px is entered, the submenu text is overlayed with the sub-submenu text (In the example, Highlighting Products > Entertainment Centers USA shows the problem).
The spot in the .css where I have explicitly stated the 180px width is below. I need it to be dynamic, i.e. the desired behavior is for the flyout to align with the right side of the first level vertical menu regardless of the first level submenu's width.
/* -- Appearance of second vertical dropdown menu unhovered (submenu of first level vertical menu) -- */
.rmenu li ul li:hover ul li a {
padding: 0px 0px 0px 5px;
background: #e8dec7; /*background color for submenu hovered text*/
color: #51db29; /* this is the color of the sub-sub menu text. I made the color (#51db29) 'unusual' as an example. Should be changed to something less jarring (of course) */
word-wrap: break-word;
min-width:100px;
position: relative; left: 180px; top: -35px; /* display 3rd level to the right (180px) */ /*left: 180px*/
}
The jfiddle is here:
http://jsfiddle.net/9c8wcxju/4/
Many, many thanks.....
I have simplified everything down and made this for you. You can expand on it and do what you want with it. I couldn't really work with yours, ended up deleting most of the css.
As you can see I have added class to each level of the sub-menu so it is easier to target. What I have created is what I think you wanted, I hope this puts you on the right track.
http://jsfiddle.net/9c8wcxju/5/
.rmenu ul li {
margin: 0;
padding: 0;
position: relative;
}
.rmenu ul {
list-style-type:none;
margin:0;
padding:0;
}
.rmenu li a {
display:block;
min-height: 35px;
line-height: 35px;
font-family: "Arial", sans-serif;
font-size: 18px;
color: #000000;
background-color: #e8dec7;
text-decoration: none;
white-space: nowrap;
}
.rmenu li:hover a {
background: #d6cbb0;
}
.rmenu .hidden {
display: none;
}
.rmenu .level_1 > li {
float: left;
}
.rmenu .level_1 > li a {
padding: 0 10px;
}
.level_1 > li:hover .level_2,
.level_2 > li:hover .level_3 {
display: block;
}
.level_2 {
position: absolute;
left: 0;
}
.level_3 {
position: absolute;
top: 0;
left: 100%;
}
I'm trying to get all the text in this list to be flush against the bullet. However, the text is wrapping under the bullet image. Tried changing the padding/margin on the a and li and also nowrap, but that just make it stick out over the right border. The bullets are the WBI logos under News: http://circore.com/womensbasketball/ Any ideas? thanks!
You could try
ul {
list-style-position: outside;
}
but I would personally use a background image and some padding, something like:
li {
list-style: none;
background: transparent url(your/icon.png) no-repeat left center;
padding-left: 20px; /* or whatever the width of your image is, plus a gap */
}
See this page for more details:
http://www.tm4y.co.za/general-tips/css-bulleted-lists-styling.html
I did this on your site with firefox and it works
#menu-news li:first-of-type {
border-top: medium none;
height: 55px;
list-style-position: inside;
margin-left: 8px;
margin-right: 15px;
padding: 10px 10px 10px 66px;
vertical-align: top;
}
#menu-news li {
background: url("images/wbismall.png") no-repeat scroll 0 0 transparent;
border-top: 1px solid #666666;
height: 55px;
list-style-position: inside;
margin-left: 10px;
margin-right: 15px;
padding: 10px 10px 10px 66px;
}
This works for unordered lists:
#menu-news ul {
list-style:outside circle;
margin-left:60px;
}
#menu-news ul li {
padding-left:20px;
}
The margin-left moves the whole list in by 60px.
The padding-left is only needed if you want extra space between the bullet point and the list item text. The list item text wraps under itself and not under the bullet.
You need to add display: inline-block; to the link inside the td element.
Your class looked like this:
#menu-news li a {
color: #000000;
font-family: Arial,Helvetica,sans serif;
font-size: 13px;
margin-top: 10px;´
}
But need to look like this:
#menu-news li a {
display: inline-block;
color: #000000;
font-family: Arial,Helvetica,sans serif;
font-size: 13px;
margin-top: 10px;
width: 200px;
}
I had the same problem and here is how I fixed it. The important line is background-repeat: no-repeat;. Bullet points will be added to every new line/list item of your list but it will not put a bullet point when text is wrapped to the next line. Look at my code below to see where I placed it.
ul {
margin: 0;
list-style-type: none;
list-style-position: inside;
}
ul li {
background-image: url(https://someimage.png);
background-size: 25px;
background-repeat: no-repeat;
background-position: 0px 5px 100px;
padding-left: 39px;
padding-bottom: 3px;
}
A few notes on my code: I used an image for the bullet points. I also used background-image: instead of list-style-image: because I wanted to control the size of the image bullet. You can simply use list-style: property if you want simple bullet and this should work well even with wrapped text. See https://www.w3schools.com/cssref/pr_list-style.asp for more information on this.
Try simple set the position attribute:
list-style-position: inside; nothing more need to work.
Here is the working example:
https://codepen.io/sarkiroka/pen/OBqbxv
I ran into a similar issue while I testing accessibility of pdfs generated with pdfreactor, my problem was that list-style-type: disc broke the 'logical reading order' in Adobe acrobat's Reading Order Pane. Having a jumbled reading order won't break the NVDA screen reader experience for visually-impaired users, but it does prevent the user from bookmarking a pdf document correctly.
My solution to fix the text from wrapping directly underneath the bullet character AND fix the reading order:
ul {
list-style-type: none;
}
li {
margin-left: 10px;
}
li::before {
content: '•\00A0';
margin-left: -10px; // a negative margin will remove the bullet from interrupting the flow of the text
}
I made a new website and my problem is that the menu is ok in FF and other browsers, but not in IE.
The problem is, it wont list the list elements, no hover , no color, and not inline.
here is the code
nav {
margin-top: 15px;
}
nav ul {
position: relative;
left: 297px;
}
nav li {
float: left;
padding: 0 20px;
font-size: 12px;
line-height: 65px;
background: url(images/line.png) no-repeat right 10px;
height: 72px;
text-transform: uppercase;
}
nav li a {
color: #656464;
text-decoration: none;
display: block;
}
nav li:hover {
background: url(images/hover.png) repeat-x 0 35px;
color: #242424;
}
could please someone could give me a hint?
nav is an HTML5 element; old IEs will not recognize it and thus won't apply your styles.
To make IE recognize HTML5 markup, place the HTML5 shiv on your page, then declare a rule for nav and any other HTML5 elements you use, giving them a display: block style, just above the CSS that you have now.
<nav> is fine to use on a page, but you will run into problems with it when you try and style it as many browsers simply skip the tag if they don't understand it.
Wrap the <nav> tag in a wrapper div and style that instead, and strip away any styling from the semantic tags so they are naked.