I have a navigation menu, and the first item replaces the content with an icon. I'm doing this by setting the font-size to 0px of the main element, and then adding an after element. This seems to be a common practice and it works so far so good.
However I can't seem to align the after element with the rest of the navigation menu.
I started playing around with line-height and vertical-align which got me closer to my goal, but as you can see, it's still not properly working as expected.
The fiddle can be found here: https://jsfiddle.net/67dyxLr1/
<nav class="nav-primary">
<ul class="menu">
<li class="menu-item home">Home</li>
<li class="menu-item">Blog</li>
<li class="menu-item">Contact</li>
<li class="menu-item">About Us</li>
</ul>
</nav>
Here is my CSS:
.nav-primary {
background: #CCC;
}
.nav-primary li {
list-style-type: none;
display: inline-block;
text-align: left;
font-size: 26px;
line-height: 0px;
}
.nav-primary a {
display: inline-block;
padding: 32px 20px;
border: 1px dashed black; /* border only used for display purpose of alignment*/
margin-right: -4px;
}
.nav-primary a:hover {
background: #FFF;
}
.menu {
width: 100%;
}
.menu-item {
}
.home a {
font-size:0px;
}
.home a:after {
font-family: "dashicons";
content: " \f102";
font-size: 40px;
display: inline-block;
vertical-align: middle;
line-height: 0px;
}
Just add vertical-align: middle to your li
CSS
.nav-primary li {
list-style-type: none;
display: inline-block;
text-align: left;
font-size: 26px;
line-height: 0px;
vertical-align: middle;
}
DEMO HERE
You need to add vertical align to your li:
.nav-primary {
background: #CCC;
}
.nav-primary li {
list-style-type: none;
display: inline-block;
text-align: left;
font-size: 26px;
line-height: 0px;
vertical-align: middle; /* add this */
}
.nav-primary a {
display: inline-block;
padding: 32px 20px;
border: 1px dashed black;
/* border only used for display purpose of alignment*/
margin-right: -4px;
}
.nav-primary a:hover {
background: #FFF;
}
.menu {
width: 100%;
}
.menu-item {} .home a {
font-size: 0px;
}
.home a:after {
font-family: "dashicons";
content: " \f102";
font-size: 40px;
display: inline-block;
vertical-align: middle;
line-height: 0px;
}
<nav class="nav-primary">
<ul class="menu">
<li class="menu-item home">Home</li>
<li class="menu-item">Blog</li>
<li class="menu-item">Contact</li>
<li class="menu-item">About Us</li>
</ul>
</nav>
Related
I am working on a horizontal navigation bar with a dropdown menu. I'm quite new to making codes so this is maybe a stupid question. My navigation is sticking to the left of my website, but I need it to stay in line with the text and I can't get the navigation bar threw my whole webpage how do I fix this?
photo of my website with the 2 problems:
enter image description here
nav {
position: absolute;
}
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal>li {
float: left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: inline-block;
}
.horizontal li a {
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
width: 70px;
}
.horizontal li a:hover {
background-color: darkorange;
color: #a2becf
}
.horizontal li:first-child a {
border-left: 0;
}
.horizontal li:last-child a {
border-right: 0;
}
h1 {
margin-top: 80px;
}
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
Two things in your css are giving you trouble.
nav{ position: absolute; } means this div will not fill the width.
horizontal{ margin: 40 auto;} 40 is not valid.
You MUST specify a measurement unit in CSS, so it should be 40px if I'm guessing your intention, but other units are available.
Here is amended css you can try.
nav {
width: 100%;
background-color: #006600;
}
.horizontal {
list-style-type: none;
margin: 40px auto;
width: 640px;
padding: 0;
overflow: hidden;
}
Step 1) Add HTML:
Example
<!-- The navigation menu -->
<div class="navbar">
<a class="active" href="#">Home</a>
Planning
Takken
Kleding
Contact
Inschrijven
</div>
And CSS:
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 15%;; /* Four links of equal widths */
text-align: center;
}
I am designing a hotel website with a fixed navbar. I am having trouble getting the items to be inline with an image item. It's getting quite frustrating.
Here's my HTML
<nav id="navigation">
<ul>
<li class="left">Rooms</li>
<li class="left">Dining</li>
<li class="home"><img src="assets/navbarimg.png" height="64.5px" weight="250px"></img></li>
<li class="right">Activities</li>
<li class="right">Book a Stay</li>
</ul>
</nav>
and here's my CSS
#navigation ul {
text-align: center;
position: fixed;
width: 100%;
max-width: 100%;
font-size: 2vh;
font-family: 'Raleway', sans-serif;
z-index: 100;
background-color: rgba(255,255,255,.55);
display: inline-block;
}
#navigation li {
display: inline-block;
list-style-type: none;
}
#navigation a {
text-decoration: none;
margin: 0px 75px 0 75px;
color: black;
font-weight: 600;
text-transform: uppercase;
display: inline-block;
}
.left {
display: inline;
}
.home {
display: inline;
}
.right {
display: inline;
}
My code is super basic, so work with me here.
#navigation ul {
text-align: center;
position: fixed;
width: 100%;
max-width: 100%;
font-size: 2vh;
font-family: 'Raleway', sans-serif;
z-index: 100;
background-color: rgba(255, 255, 255, .55);
display: inline-block;
}
#navigation li {
display: inline-block;
list-style-type: none;
}
#navigation a {
text-decoration: none;
margin: 0px 75px 0 75px;
color: black;
font-weight: 600;
text-transform: uppercase;
display: inline-block;
}
.left {
display: inline;
}
.home {
display: inline;
}
.right {
display: inline;
}
<nav id="navigation">
<ul>
<li class="left">Rooms</li>
<li class="left">Dining</li>
<li class="home">
<a href="index.html"><img src="https://placehold.it/250x65" height="64.5px" weight="250px"></img>
</a>
</li>
<li class="right">Activities</li>
<li class="right">Book a Stay</li>
</ul>
</nav>
Live Example I made: https://akainth015.github.io/Inked-Out
Often, you can align things with vertical-align(CSS). However, it is a little counter-intuitive. When you use the vertical-align style, the element it is applied to becomes the standard for the rest of the elements. So, if you have this structure:
li {
display: inline-block;
}
ul {
list-style-type: none;
}
li img {
vertical-align: middle;
}
<ul>
<li>Home</li>
<li><img src="https://placehold.it/64x64"></li>
<li>About</li>
</ul>
Notice how it is applied to the image, not the the text you want in the center. Good luck!
I'm new to this, so I'm clueless.
Whenever I go to my site with a different resolution the menu changes a lot and does not align correctly. Just tell me if i need more of the html or css.
My webpage is Aulan.co
My code:
ul {
font-size: 25px;
color: black;
text-align: center;
list-style-type: none;
margin-bottom: 2em;
line-height: 150%;
margin-left: 3em;
margin-right: 5em;
}
#menu {
list-style-type: none;
margin: auto;
width: 90%;
height: auto;
padding: auto;
overflow: hidden;
background-color: #353B4E;
text-align: center;
font-size: 18px;
}
li {
text-align: center;
}
li a {
display: block;
color: white;
text-align: center;
padding: 5px 70px;
text-decoration: none;
height: auto;
}
li a:hover {
background-color: #111;
display: inline;
}
#menus {
float: left;
<h1> AuLan </h1>
<ul id="menu">
<li id="menus"><a class="active">Forside</a></li>
<li id="menus">Informasjon</li>
<li id="menus">Regler</li>
<li id="menus">Crew</li>
<li id="menus">Kontakt oss</li>
<li id="menus">Seatmap</li>
<li id="menus">Timeplan</li>
</ul>
it's not really clear what you want to achieve, but I tried to change your code in a way that I think you might want. I took out a lot of unneccessary code from the CSS and added some. In the HTML, i change the menusID to a class, since IDs should only be used once per page.
You can adjust especially the min-width and padding setting in the menu li a rule to your needs (but also the other width and padding settings)
#menu {
font-size: 25px;
list-style-type: none;
width: 90%;
background-color: #353B4E;
font-size: 18px;
padding: 10px 20px;
}
#menu li {
display: inline-block;
line-height: 150%;
}
#menu li a {
display: block;
min-width: 100px;
color: white;
padding: 5px 15px;
text-decoration: none;
}
#menu li a:hover {
background-color: #111;
}
<h1> AuLan </h1>
<ul id="menu">
<li class="menus"><a class="active">Forside</a></li>
<li class="menus">Informasjon</li>
<li class="menus">Regler</li>
<li class="menus">Crew</li>
<li class="menus">Kontakt oss</li>
<li class="menus">Seatmap</li>
<li class="menus">Timeplan</li>
</ul>
So basically I'm doing a layout with a large image feature, that can move from one picture to another using arrows beneath. Honestly it's quite a lot like the front page of flipboard.com, in regard to the picture feature.
.feature-nav {
width: 234px;
margin: auto;
}
.prev-arrow {
display: inline;
font-size: 30px;
color: #B6B6B6;
}
.prev-arrow:hover {
color: #428bca;
}
.feature-nav ul {
display: inline;
}
.feature-nav li {
display: inline;
}
.nav-dot a {
font-size: 30px;
color: #B6B6B6;
}
.next-arrow {
display: inline;
font-size: 30px;
color: #B6B6B6;
}
.next-arrow:hover {
color: #428bca;
}
<div class="feature-nav">
<
<ul>
<li class="nav-dot">•</li>
<li class="nav-dot">•</li>
<li class="nav-dot">•</li>
</ul>
>
</div>
The output:
Does anyone know why the dots and right arrow are so far shifted from the left arrow? I've tried adjusting padding, margins, the "left: " property, and all of them work accept the make the left arrow not select properly, it only recognizes that you're hovering over it if you hover over a very small certain area. Right now, with the shown code, it doesn't do that, but the positioning is off. Does anyone have any ideas?
Because unordered lists have a default padding that you can get rid of by adding padding:0 to your .feature-nav ul rules:
.feature-nav {
width: 234px;
margin: auto;
}
.prev-arrow {
display: inline;
font-size: 30px;
color: #B6B6B6;
}
.prev-arrow:hover {
color: #428bca;
}
.feature-nav ul {
display: inline;
padding:0;
}
.feature-nav li {
display: inline;
}
.nav-dot a {
font-size: 30px;
color: #B6B6B6;
}
.next-arrow {
display: inline;
font-size: 30px;
color: #B6B6B6;
}
.next-arrow:hover {
color: #428bca;
}
<div class="feature-nav">
<
<ul>
<li class="nav-dot">•</li>
<li class="nav-dot">•</li>
<li class="nav-dot">•</li>
</ul>
>
</div>
Try display: inline-block for the arrows and list items, and give them padding for a larger "hit" area for when hovering. You can also set a right or left margin for the arrows or list items to separate them a bit as well.
As for why they're off-center, remove padding from the ul element.
As for the
.feature-nav {
width: 234px;
margin: auto;
}
.prev-arrow {
display: inline-block;
padding 10px;
margin-right: 20px;
font-size: 30px;
color: #B6B6B6;
}
.prev-arrow:hover {
color: #428bca;
}
.feature-nav ul {
display: inline;
padding: 0;
}
.feature-nav li {
display: inline-block;
margin: 0 5px;
}
.nav-dot a {
font-size: 30px;
color: #B6B6B6;
}
.next-arrow {
display: inline-block;
padding 10px;
margin-left: 20px;
font-size: 30px;
color: #B6B6B6;
}
.next-arrow:hover {
color: #428bca;
}
<div class="feature-nav">
<
<ul>
<li class="nav-dot">•</li>
<li class="nav-dot">•</li>
<li class="nav-dot">•</li>
</ul>
>
</div>
<ul class="nav">
<li><i class="icon-home"></i></li>
<li>Blog</li>
<li>Elements</li>
<li>Contact us</li>
</ul>
.nav {
line-height: 70px;
margin: 0;
padding: 0;
border: 0;
}
.nav li {
list-style-image: none;
list-style-type: none;
margin-left: 0;
white-space: nowrap;
display: inline;
float: left;
padding-left: 4px;
padding-right: 4px;
}
.active {
background: pink;
}
.icon-home {
background: url(http://i.stack.imgur.com/MNme0.png) no-repeat;
width: 16px;
height: 14px;
display:block;
}
body {
background: gray;
}
How do I make the background of .active take up the whole height of li and center the icon? If you check the demo it doesn't respect the line-height of the li.
Demo: http://codepen.io/anon/pen/ulEGw
You could set .icon-home to display: inline-block;, which will center it vertically with the rest of the text.
You can also keep your line-height this way.
Assuming you want to keep your line-height: 70px on .nav, put height: 70px; on .icon-home.