I'm trying to position a 5px x 5px circle in the centre of the underneath of the links in a nav to indicate which page the user is currently on, but I'm not sure how I should be going about this.
Currently I have this: Image
I am trying to do this:
Image
This is the code:
<ul id="nav-menu">
<li class="nav-menu-item">
Our work
</li>
<li class="nav-menu-item">
What we do
</li>
<li class="nav-menu-item">
Blog
</li>
<li class="nav-menu-item">
Contact
</li>
</ul>
nav {
height: 70px;
background: #fff;
display: flex;
align-items: center;
padding: 0 75px;
}
#nav-logo-link {
flex: 1;
}
#nav-logo {
height: 35px;
}
#nav-menu {
list-style: none;
padding: 0;
white-space: nowrap;
}
#nav-menu > li {
display: inline;
margin: 0 10px;
}
#nav-menu > li > a {
text-decoration: none;
color: #000;
}
I have tried putting an <i> element within the <li> and then positioning it as absolute, and whilst I can put it down at the correct height (since the nav height is static), when I set it as left: 0;, it jumps to the left hand side of the entire nav. I tried putting a <div> within the <li> but that didn't do anything.
Any ideas?
You can use an after pseudo element to do this along with a UTF8 character, see the following fiddle.
Edit: I'm assuming you want this to happen when the user clicks a link and is then on that page hence why I've used a data attribute, the previous answer does it on hover.
I've made three amendments to your code here:
Added position: relative; to your anchors, this allows me to use position: absolute in the next css block:
nav-menu > li > a {
text-decoration: none;
color: #000;
position: relative;
}
Added the pseudo element absolutely positioned at 50% of the anchor width, I've also set it's width and then centred it within that by using a negative margin of half its width. This relies on you setting the selected item with a little bit of javascript, see point 3. You may want to adjust the colour:
nav-menu > li > a[data-selected=true]:after {
content: "\25CF";
position: absolute;
top: 1.1em;
left: 50%;
width: 10px;
margin-left: -5px;
color: cadetblue;
}
Added a data-selected="true" attribute to the selected anchor, you need to do this in javascript as a different anchor is selected. This allows the css in step 2 to select the right anchor.
This can be done by adding a nav-menu-item:after{ rule which adds a circle after the <li> tag then set the display for the #nav-menu > li { to inline-block and you should get the desired result on hover
nav {
height: 70px;
background: #fff;
display: flex;
align-items: center;
padding: 0 75px;
}
#nav-logo-link {
flex: 1;
}
#nav-logo {
height: 35px;
}
#nav-menu {
list-style: none;
padding: 0;
white-space: nowrap;
}
#nav-menu > li {
display: inline-block;
margin: 0 10px;
}
#nav-menu > li > a {
text-decoration: none;
color: #000;
}
.nav-menu-item:hover:after {
content: "\25CF";
display: block;
opacity: 1;
margin-left: auto;
margin-right: auto;
}
.nav-menu-item::after {
content: "\25CF";
opacity: 0;
color: #1ba9b3;
display: block;
margin-left: auto;
margin-right: auto;
width: 5px;
height: 5px;
}
<nav>
<ul id="nav-menu">
<li class="nav-menu-item">
Our work
</li>
<li class="nav-menu-item">
What we do
</li>
<li class="nav-menu-item">
Blog
</li>
<li class="nav-menu-item">
Contact
</li>
</ul>
</nav>
If you want to show the dot when selected you can use javascript to set the class to be <li class="nav-menu-item selected"> then in css you would change .nav-menu-item:hover:after { to .nav-menu-item.selected:after {
Hope this helps!
Related
My page header has a misaligned <li> element. Here is a screenshot:
Basicly I want to say "center both elements vertically, one to the left and the other to the right".
I'm able to align a <li> element
horizontally with style="float:right"
vertically with style="vertical-align:middle".
...But not at the same time. Based on a similar question, I was expecting this to work:
style="float:right; vertical-align:middle"
It doesn't.
I also found some ways to align an entire list, but those were not applicable to aligning an individual element of a list.
Here is the relevant html-thymeleaf code:
<div th:fragment="header">
<nav>
<ul class="navcontainer">
<li class="navtitle"><h2>Personal Expense Tracker</h2></li>
<li class="navlogout" th:inline="text" style="float:right">[[(${user != null ? 'Logout ' + user : ''})]]</li>
</ul>
</nav>
</div>
Here is the relevant css code:
nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
overflow: hidden;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
margin: 0;
display: inline-block;
list-style-type: none;
transition: all 0.2s;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 2em;
padding: 0.5em 2em;
text-decoration: none;
}
nav > ul > li > a:hover {
background-color: #111;
}
With the code you added..
Using flexbox, you can do this:
nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
overflow: hidden;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;/* added */
align-items: center;/* added */
justify-content: space-between;/* added */
}
nav ul li {
margin: 0;
display: inline-block;
list-style-type: none;
transition: all 0.2s;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 2em;
padding: 0.5em 2em;
text-decoration: none;
}
nav > ul > li > a:hover {
background-color: #111;
}
<div th:fragment="header">
<nav>
<ul class="navcontainer">
<li class="navtitle"><h2>Personal Expense Tracker</h2></li>
<li class="navlogout" th:inline="text" >Log out</li>
</ul>
</nav>
</div>
the question is a little vague. If you could give me a visual of your problem / what you're looking for as a result I could probably help more.
Anyways here is the classic way to horizontally and vertically align an element to its parent.
Best of luck!
.container {
position: relative;
display: block;
margin: 0 auto;
width: 50%;
max-width: 1000px;
height: 100px;
background: grey;
}
.element {
position: absolute;
display: block;
width: 50%;
height: 50px;
background: red;
top: 50%;
margin-top: -25px;
left: 50%;
margin-left: -25%;
}
<ul class="container">
<li class="element"></li>
</ul>
You should give height or line-height to the element (or in some case parent element has no height) so vertical-align:middle will not work because there is no height.
First give height to the element which you want to set vertically middle if it does not work give height to the parent element.
I'm currently building a dropdown nav bar that activates upon hover.
I would like the dropdown nav to display directly under the PORTFOLIO link when hovered over, it's currently displaying over to the right.
Styling and what not is going to come later, I wanted this bit sorted before carrying on.
<div class="twelve columns">
<ul class="navigation six columns offset-by-three">
<li>HOME</li>
<li>PORTFOLIO</li>
<div class="sub-hover">
Photos
Physical
Write
Studies
</div>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
.navigation {
display: flex;
flex-direction: row;
justify-content: center;
}
.navigation li {
display: inline-block;
padding: 10px 20px;
}
.submenu {
position: relative
}
.sub-hover {
position: absolute;
display:;
margin-top: 25px;
padding: 5px 10px;
}
.sub-hover a {
display: block;
}
.submenu:hover .sub-hover {
display: block;
}
There are a couple things you need to change:
You need to place your .sub-hover inside of the portfolio <li> instead of outside of it.
Display your .sub-hover div when .submenu is hovered. You can accomplish this by using the CSS sibling selector ~.
Display your .sub-hover div when the div itself is hovered.
In your .sub-hover div, use padding instead of margin so the div won't disappear when you move your mouse from the title to the dropdown.
CSS
.sub-hover {
padding-top: 25px;
}
.submenu:hover ~ .sub-hover {
display: block;
}
.sub-hover:hover {
display: block;
}
.navigation {
display: flex;
flex-direction: row;
justify-content: center;
}
.navigation li {
display: inline-block;
padding: 10px 20px;
}
.submenu {
position: relative
}
.sub-hover {
position: absolute;
display:;
padding-top: 25px;
padding: 5px 10px;
display: none;
}
.submenu:hover ~ .sub-hover {
display: block;
}
.sub-hover:hover {
display: block;
}
.sub-hover a {
display: block;
}
.submenu:hover .sub-hover {
display: block;
}
<div class="twelve columns">
<ul class="navigation six columns offset-by-three">
<li>HOME</li>
<li>PORTFOLIO
<div class="sub-hover">
Photos
Physical
Write
Studies
</div>
</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
This will take a little tweaking of your markup, but a common way to deal with this boils down to
<ul class="navigation">
<li>
<a>main menu item 1</a>
<li>
<a>main menu item 2</a>
<ul>
<li>
<a>drop down 1 under menu item 2</a>
</li>
<li>
<a>drop down 2 under menu item 2</a>
</li>
</ul>
<li>
</ul>
and
.navigation {
list-style: none
}
.navigation li {
display: inline-block;
position: relative;// required for positioning the dropdown relative to the parent menu item
}
.navigation li li {
display: block
}
.navigation ul {
display: none;
position: absolute;
top: 100%;// makes the dropdown "hang" from the menu
left: 0;// tweak as needed
width: 100px;//some value required here
}
.navigation li:hover ul {
display: block
}
The keys to your question are putting the dropdown inside the main menu item, making the main menu item position: relative, and making the dropdown position: absolute; top: 100%; width: something and left: something or right: something
All the questions I've looked at refer to WordPress or Bootstrap (what is that?) nav bars, I have made mine using CSS.
I would like to make my nav bar bigger so that it's easier for mobile users to click the correct link. I've tried using the height: px; but all that did was push the text below further down.
What do I use to change the size of the buttons themselves? included my CSS below.
html{background:gray;}
ul {
left: 0;
top: 50%;
width: 100%;
text-align: center;
display: inline-block;
list-style-type: none;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin: 0
}
li a:hover:not(.active) {
background-color: #111;
}
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
Please note I have added backgrounds in order to display the navbar, and are not required in production
You are OK to use the ul and li elements within your code. In order to make the navbar appear 'taller', you would need to set both the height of the ul element itself, as well as the child li. A quick demo has been provided below.
I have given the height of the ul element 100px, although this value can be changed to your preference. Note you may also want to change line-height property of your a elements to suit this.
html,body {
background: gray;
margin:0;
padding:0;
}
ul {
left: 0;
top: 50%;
text-align: center;
display: block;
list-style-type: none;
background: dimgray;
height: 100px; /* <-- change this line*/
}
li {
display: inline-block;
height: 100%;
}
li a {
display: inline-block;
color: white;
background: lightgray;
line-height: 100px; /* <-- change this line*/
text-align: center;
padding-left: 50px;
padding-right: 50px;
text-decoration: none;
margin: 0;
height: 100%;
}
li a:hover:not(.active) {
background-color: #111;
}
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
What do I use to change the size of the buttons themselves?
Add more padding! Take a look-see.
body {background-color: gray;}
ul {
left: 0;
top: 50%;
width: 100%;
text-align: center;
display: inline-block;
list-style-type: none;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 2em; /* bigger button? add more padding! */
text-decoration: none;
margin: 0
}
li a:hover:not(.active) {
background-color: #111;
}
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
There are many ways to increase the size of the link. This is just one way. jbutler's answer is a good way too. It just depends on what exactly you want it to do.
Hope this helps.
If you are trying to make the text itself larger you can use the font-size property.
In a section of website I'm working on I have a NAV element that contains three sections: About, Portfolio, Contact. I'm trying to make it so that when you hover over the Portfolio section, a drop down appears allowing you to choose between two other sections, "Writing Samples" and "Photoshop." I am trying to accomplish this using only CSS.
This is my HTML section:
<nav>
<ul>
<li>
<a href="index.html" >About</a>
</li>
<li class="subNav">
<a class="selected" >Portfolio</a>
<ul>
<li>Writing Samples</li>
<li>Photoshop</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
And CSS:
nav {
position: absolute;
bottom: 0;
right: 0;
padding: 10px 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
nav ul li.subNav ul {
display: none;
}
nav ul li.subNav:hover ul {
display: block;
}
I have reached the point that when I hover over the Portfolio list item, you see the resulting list items "Writing Samples" and "Photoshop", except that it displays these two items as a part of the original unordered list, and moves the "Portfolio" list item above the rest of the items. I would like "Writing Samples" and "Photoshop" to appear vertically under "Portfolio", but I can't quite figure this out with CSS.
This is the basics of it:
nav {
position: absolute;
padding: 10px 0;
}
nav ul {
list-style: none;
;
padding: 0;
}
nav > ul > li {
display: inline-block;
position: relative;
border: 1px solid lightgreen;
/* for demo */
}
nav a {
font-weight: 800;
padding: 5px 10px;
display: block;
}
nav > ul > li.subNav ul {
display: none;
position: absolute;
top: 100%;
left: 0;
white-space: nowrap;
background: pink;
}
nav ul li.subNav:hover ul {
display: block;
}
<nav>
<ul>
<li>
About
</li>
<li class="subNav">
<a class="selected">Portfolio</a>
<ul>
<li>Writing Samples
</li>
<li>Photoshop
</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
The parent li is given position:relative to provide positioning context.
The submenu is positioned absolutely, at the bottom of the parent li and aligned left.
Note that I have used the direct child selector > to target only the elements I want to.
Then, since the submenu is too wide to be contained within the parent's width, I added white-space:nowrap so that the text will flow as required.
You have the right idea; the comment tags in the HTML below are used to remove space between the "li" elements.
Instead of using display:none, I use visibility: hidden for S.E.O purposes.
Even though you use position: absolute, you should also use z-index so that menu elements are able to be clicked if they are overlapping other content.
.mm,
.sm {
list-style: none;
}
.mm {
position: relative;
margin: 0px;
padding: 0px;
background-color: #000;
border-bottom: 4px solid red;
}
.sm {
position: absolute;
z-index: 1;
visibility: hidden;
background-color: #000;
border-width: 0px 4px 4px 4px;
border-style: solid;
border-color: red;
}
.mm > li {
display: inline-block;
}
.mm > li > a {
display: inline-block;
padding: 8px;
}
.sm a {
display: block;
padding: 8px;
}
.mm > li > a:hover + .sm,
.sm:hover {
visibility: visible;
}
.mm a {
text-decoration: none;
color: #FFF;
}
.mm a:hover {
text-decoration: underline;
color: yellow;
}
<nav>
<ul class="mm">
<li>AAA</li><!--
--><li>BBB
<ul class="sm">
<li>SUB</li><!--
--><li>SUB</li><!--
--><li>SUB</li>
</ul>
</li><!--
--><li>CCC
<ul class="sm">
<li>SUB</li><!--
--><li>SUB</li><!--
--><li>SUB</li>
</ul>
</li>
</ul>
</nav>
<h1>CSS NAVIGATION</h1>
I am building a CSS only two-level horizontal navigation bar with relative sub-navigation to the parent. All menu items are inline. Dependent upon the classes 'right' or 'left', the sub-nav aligns to the parent. This is what I've managed to accomplish so far:
html:
<body>
<div class="navbar">
<ul class="topnav left">
<li>nav</li>
<li>menu1
<span class="subnav">
<ul class="subnav subnav-left">
<li>item1-1</li>
<li>item1-2</li>
<li>item1-3</li>
</ul>
</span>
</li>
<li>menu2
<span class="subnav">
<ul class="subnav subnav-left">
<li>item2-1</li>
<li>item2-2</li>
<li>item2-3</li>
</ul>
</span>
</li>
</ul>
<ul class="topnav right">
<li class="right">menu3
<span class="subnav subnav-right">
<ul class="subnav subnav-left">
<li>item3-1</li>
<li>item3-2</li>
<li>item3-3</li>
</ul>
</span>
</li>
<li class="right">menu4
<span class="subnav subnav-right">
<ul class="subnav subnav-left">
<li>item4-1</li>
<li>item4-2</li>
<li>item4-3</li>
</ul>
</span>
</li>
</ul>
</div>
</body>
css:
body {
font-family: arial;
margin: 0;
}
.navbar {
height: 40px;
background-color: black;
}
ul.topnav {
margin: 0;
padding: 0;
}
.subnav {
position: absolute;
}
.subnav-right {
right: 0;
}
ul.subnav {
position: relative;
margin: 4px 0 0 -8px;
padding: 0;
display: none;
}
ul.topnav li{
list-style: none;
display: inline-block;
color: white;
padding: 4px 8px;
font-weight: bold;
line-height: 32px;
float: left;
clear: none;
box-sizing: border-box;
}
ul.subnav li {
background-color: red;
list-style: none;
display: inline-block;
color: white;
padding: 4px 8px;
font-weight: bold;
position: relative;
line-height: 32px;
float: left;
clear: none;
box-sizing: border-box;
}
.topnav li:hover {
background-color: red;
}
.topnav li:hover ul.subnav {
display: inline-block;
background-color: red;
}
.nav ul li:hover {
background-color: black;
}
.nav ul li {
width: 100%;
}
.nav li ul {
display: inline-block;
clear: none;
position: absolute;
background-color: red;
margin: 4px 0 0 -8px;
padding: 0;
}
.left {
float: left;
}
.right {
float: right;
}
The jsfiddle:
jsfiddle.net/aLZqZ
Here is what I'm trying to accomplish:
image to nav menu
I got this for you http://jsfiddle.net/aLZqZ/99/. In under 100 tries, too. I became a little obsessed and spent at least 5 hours total. A good challenge for me and I have never really fiddled with sub navs before.
This issue was three fold:
Using float:right for a horizontal nav bar is usually not good in my experience because it causes unexpected issues, also it is negated and ignored by browsers if the same element is positioned relative or absolute (you had a lot of superfluous code, btw). I changed float:right to text-align:right where necessary. See this for horizontal nav I fixed for someone recently: Aligning/floating my nav bar to the right
The li element containing the sub menu was not positioned, therefore, the position:absolute and right:0 on the ul within it moves according to the closest containing element that is position:absolute or :relative. In this case there was not one so that element was html; thus the ul would be pushed all the way right to the end of the page. I added position:relative to these li elements which then made the right:0 behave as expected, but did not put all the li element on one line and stacked them instead.
You had tags with display:inline-block when :inline would have done it, but more importantly, no one ever really mentions that white-space:nowrap on the same elements to do what you are trying here is important. inline-block and nowrap together should force one line block like elements that you can align or float as whole as if they were a paragraph. BTW, IE7 needs some special attention for inline-block. See here: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
I made special css at the bottom of yours in your fiddle to separate the left and right navs, and I basically left your original css alone. I also adjusted the html a bit. Here it all is.
HTML for the right nav (follows the HTML for the left nav):
<ul class="rightNav">
<li>menu3
<ul class="rightSubNav">
<li>item3-1</li>
<li>item3-2</li>
<li>item3-3</li>
</ul>
</li>
<li>menu4
<ul class="rightSubNav">
<li>item4-1</li>
<li>item4-2</li>
<li>item4-3</li>
</ul>
</li>
</ul>
CSS that I added to separate the right and left nav:
ul.rightNav {
margin:0;
padding:0;
text-align: right;
}
.rightNav li:hover {
background-color: red;
}
ul.rightNav li{
list-style: none;
display: inline-block;
color: white;
padding: 4px 8px;
font-weight: bold;
line-height: 32px;
position:relative;
}
ul.rightSubNav {
position: absolute;
right:0;
margin: 4px 0 0 -20px;
padding: 0;
display: none;
white-space:nowrap;
}
ul.rightSubNav li {
background-color: red;
list-style: none;
display: inline;
color: white;
padding: 4px 8px;
font-weight: bold;
position: relative;
line-height: 32px;
}
.rightNav li:hover ul.rightSubNav {
display: inline-block;
background-color: red;
}
If this helped I would appreciate the up votes and answer select. If you figured something else out and got it working differently please post. I would love to see it.