How can I align the down arrow from material icons under the link text? I tried using the :after pseudo class, but it didn't work.
HTML:
<div class="jump-to-links">
<ul class="list-unstyled">
<li>
Link<i class="material-icons"></i>
</li>
<li>
Link<i class="material-icons"></i>
</li>
<li>
Link<i class="material-icons"></i>
</li>
<li>
Link<i class="material-icons"></i></li>
</ul>
</div>
SCSS:
.jump-to-links {
.material-icons {
#include centerX();
bottom: -20px;
color: $purple;
padding: 10px 0px 10px 0px;
}
text-align: center;
a,a:hover {
text-decoration: none;
color: $black;
font-weight: bold;
display: inline-block;
}
ul li {
display: inline-block;
margin-right: 12%;
}
li {
cursor: pointer;
text-align: center;
position: relative;
}
}
JSFIDDLE https://jsfiddle.net/kpvwwveL/6/
Add display:block to your
i{
display:block;
}
https://jsfiddle.net/kpvwwveL/3/
I discovered this as the best way to solve the alignment issue:
<div class="jump-to-links">
<ul class="list-unstyled">
<li>
Link<i class="material-icons"></i>
</li>
<li>
Link<i class="material-icons"></i>
</li>
<li>
Link<i class="material-icons"></i>
</li>
<li>
Link<i class="material-icons"></i></li>
</ul>
</div>
.jump-to-links {
.material-icons {
#include centerX();
bottom: -20px;
color: $purple;
padding: 10px 0px 10px 0px;
}
text-align: center;
a,a:hover {
text-decoration: none;
color: $black;
font-weight: bold;
display: inline-block;
}
ul li {
display: inline-block;
margin-right: 12%;
}
li {
cursor: pointer;
text-align: center;
position: relative;
}
}
Why complicate things and not go the natural way? Which I think is to put line breaks between link text and i.
<a href="#">
Link
<br>
<i class="material-icons arrow-down">keyboard_arrow_down</i>
</a>
https://jsfiddle.net/weejoy22/
Related
so I've tried a few different things out. But ultimately no success. I'm trying to change the colour of the "Home" link to stay a different colour than the rest when we are specifically on the homepage. So for example, say I'm on the homepage, I specifically want that colour to be orange for the home link, and then when I click on About link, about link changes to orange and the home goes to default white
Html:
<!--Header-->
<header class="header-main">
<!--Navigation menu-->
<nav class="navigation">
<!--Bakingwithwill Logo-->
<img class="logo" src="imgs/bww.png" alt="Bakingwithwill" />
<!--Navigation links-->
<div class="nav-links">
<!--Unordered list of navigation items-->
<ul class="nav-menu">
<li id="active-home" class="nav-items">Home</li>
<li class="nav-items">About</li>
<li class="nav-items">Order</li>
<li class="nav-items">Contact</li>
<li class="nav-items">Cart</li>
</ul>
</div>
<div class="footer-nav">
<!--Footer portion of the side navbar-->
<div class="nav-social">
<!--Navigation of Bakingwithwill social media accounts-->
<ul class="nav-social-list">
<li class="social-icons">
<i class="fab fa-facebook"></i>
</li>
<li class="social-icons">
<i class="fab fa-instagram"></i>
</li>
</ul>
</div>
<p class="copyright">Copyright Bakingwithwill</p>
<!--Copyright-->
</div>
</nav>
<img class="header-banner" src="imgs/bww-home-banner.jpg" alt="Bakingwithwill bread banner"/>
<!--Main image-->
<div class="main">
<!--Contents outside the side navbar representing header page-->
<h2 class="baking-heading">Bakingwithwill</h2>
<h1 class="welcome-heading">Welcome!</h1>
<h2 class="intro-heading">Get a slice of the best bread in<br>
Chatham-Kent!</h2>
</div>
</header>
CSS:
/*Base styles*/
body {
font-family: 'Oswald', sans-serif;
}
h1 {
font-family: 'Satisfy', cursive;
}
/*Home styles*/
header {
width: 100%;
height: 585px;
}
/*Side bar navigation menu*/
.navigation {
height: 100%;
width:160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #3D3732;
overflow-x: hidden;
padding-top: 20px;
opacity: 90%;
}
.navigation a {
text-decoration: none;
}
.logo {
border-radius: 50%;
height: 70px;
width: 70px;
margin-top: 10px;
margin-left: 45px;
}
#active-home:link, #active-home:visited {
color:#E88F2A !important;
}
.navigation li, p {
text-decoration: none;
color: #FFFFFF;
display: block;
text-align: center;
}
.navigation .nav-items {
padding-right: 30px;
padding-top: 10px;
text-align: center;
}
.navigation .social-icons {
list-style-type: none;
text-align: center;
display: inline;
font-size: 15px;
padding: 5px;
margin-top: 50px;
color: #FFFFFF;
margin-left: 15px;
text-decoration: none;
}
.navigation li:hover {
color: #E88F2A;
}
.navigation p {
font-size: 10px;
text-align: center;
padding: 6px 8px 6px 16px;
}
.main {
margin-left: 160px;
padding: 0px 10px;
}
.footer-nav {
margin-top: 200px;
}
/*Social media icons*/
.navigation i {
text-decoration: none;
color: #FFFFFF;
}
.navigation i:hover {
color: #E88F2A;
}
/*Text overlaying the image*/
.baking-heading {
color: #E88F2A;
font-family: 'Satisfy', cursive;
position: relative;
margin-top: 40px;
padding-left: 50px;
font-size: 50px;
}
.welcome-heading, .intro-heading {
font-family: 'Oswald', sans-serif;
position: relative;
}
.welcome-heading, .baking-heading {
transform: rotate(-13deg);
}
.welcome-heading {
padding-left: 130px;
font-size: 50px;
color: #FFFFFF;
}
.intro-heading {
padding-top: 200px;
font-size: 50px;
text-align: center;
color: #FFFFFF;
}
.header-banner {
/*Image styles*/
margin-top: -40px;
position: absolute;
width: 100%;
height: 585px;
}
So for example, say I'm on the homepage, I specifically want that
colour to be orange for the home link, and then when I click on About
link, about link changes to orange and the home goes to default white
One CSS-only approach is to:
add a class to the <body> element of each page
add classes to each of your links (or to the list-items containing the links)
Home Page:
<body class="home-page">
<ul class="nav-menu">
<li class="nav-items home">Home</li>
<li class="nav-items about">About</li>
<li class="nav-items order">Order</li>
<li class="nav-items contact">Contact</li>
<li class="nav-items cart">Cart</li>
</ul>
About Page:
<body class="about-page">
<ul class="nav-menu">
<li class="nav-items home">Home</li>
<li class="nav-items about">About</li>
<li class="nav-items order">Order</li>
<li class="nav-items contact">Contact</li>
<li class="nav-items cart">Cart</li>
</ul>
Then you can change the color of the relevant link on each page:
.nav-items a {
color: white;
}
.home-page .nav-items.home a,
.about-page .nav-items.about a {
color: orange;
}
You need to add a class to the active link and #id is not recommended for styling. Also, the pseudo classes that you're using is blocking your desired outcome. Try changing :
#active-home:link,
#active-home:visited {
color: #e88f2a !important;
}
to:
.active {
color: #e88f2a !important;
}
Afterwards, place the .active class into your link code for each page. So for home it would be:
<li class="nav-items active">Home</li>
and for your about page:
<a href="#">
<li class="nav-items">Home</li>
</a>
<a href="about.html">
<li class="nav-items active">About</li>
</a>
and so on...
This question already has answers here:
How do I center floated elements?
(12 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I have a problem with my Nav Bar. I need it to be centered on the screen, so it is in the middle of everything. But my Nav Bar will only be on the left side of my screen.
I tried to use Margin to fix the issue, but then it will not be responsive to the rest, so that does not work.
Here is my code for the Nav Bar:
HTML:
<nav>
<ul>
<li>
<a href="BlogTest.html">
Home
</a>
</li>
<li>
<a href="BlogTest.html">
About Me
</a>
</li>
<li>
<a href="BlogTest.html">
Contact Me
</a>
</li>
<li>
<a href="BlogTest.html">
Blog
</a>
</li>
</ul>
</nav>
Ignore the "href", they will be sorted afterwards
the CSS:
*{
margin: 0%;
padding: 0%;
background-color: rgb(53, 53, 53);
text-decoration: none;
}
nav{
width: 100%;
height: 100px;
text-align: center;
display: inline-block;
}
ul{
text-align: center;
}
ul li{
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}
ul li a{
font-family: 'PT Sans', sans-serif;
color: white;
font-size: 200%;
padding: 0px 20px;
display: block;
display: inline-block;}
ul li a:hover {
color: red;
}
I did read some of the others answered questions but without any luck from them, hope you can help me once again!
Just add display: inline-block; to the CSS rule for ul to make it only as wide as its contents and therefore also to allow the text-align: center for nav to have an effect:
* {
margin: 0%;
padding: 0%;
background-color: rgb(53, 53, 53);
text-decoration: none;
}
nav {
width: 100%;
height: 100px;
text-align: center;
display: inline-block;
}
ul {
display: inline-block;
text-align: center;
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}
ul li a {
font-family: 'PT Sans', sans-serif;
color: white;
font-size: 200%;
padding: 0px 20px;
display: block;
display: inline-block;
}
ul li a:hover {
color: red;
}
<nav>
<ul>
<li>
<a href="BlogTest.html">
Home
</a>
</li>
<li>
<a href="BlogTest.html">
About Me
</a>
</li>
<li>
<a href="BlogTest.html">
Contact Me
</a>
</li>
<li>
<a href="BlogTest.html">
Blog
</a>
</li>
</ul>
</nav>
Try putting the nav in center tags.
Like this:
<center>
<nav>
<ul>
<li>
<a href="BlogTest.html">
Home
</a>
</li>
<li>
<a href="BlogTest.html">
About Me
</a>
</li>
<li>
<a href="BlogTest.html">
Contact Me
</a>
</li>
<li>
<a href="BlogTest.html">
Blog
</a>
</li>
</ul>
</nav>
</center>
Sorry if this doesn't help. I couldn't fully understand your problem.
Try this. Don't use <center> tag, it's obsolete.
html:
<header>
<nav>
<ul>
<li>Menu</li>
</ul>
</nav>
</header>
css:
header { width: 100%; }
nav { width: 980px; margin: 0 auto; display: block; }
margin: 0 auto; will center the element. just make sure that it has a width, otherwise this will not work.
try this =)
* {
margin: 0;
padding: 0;
background-color: rgb(53, 53, 53);
text-decoration: none;
}
nav {
position: absolute;
width: 100%;
height: 100px;
text-align: center;
display: block;
margin: auto;
border: 2px solid white;
}
ul {
display: inline-block;
text-align: center;
width: max-content;
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
margin: auto;
}
ul li a {
font-family: 'PT Sans', sans-serif;
color: white;
font-size: 100%;
padding: 0px 10px;
display: inline-block;
}
ul li a:hover {
color: red;
}
<nav>
<ul>
<li>
<a href="BlogTest.html">
Home
</a>
</li>
<li>
<a href="BlogTest.html">
About Me
</a>
</li>
<li>
<a href="BlogTest.html">
Contact Me
</a>
</li>
<li>
<a href="BlogTest.html">
Blog
</a>
</li>
</ul>
</nav>
Here's my HTML:
<body>
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fas fa-bars"></i>
</span>
logo
<ul class="main-nav" id="js-menu">
<li>
Home
</li>
<li>
Products
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
<li>
Blog
</li>
</ul>
</nav>
</body>
Here's my CSS:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: "Josefin Sans", sans-serif;
}
.navbar {
font-size: 18px;
padding-bottom: 10px;
}
.main-nav {
list-style-type: none;
display: none;
}
.nav-links,
.logo {
text-decoration: none;
color: black;
}
.main-nav li {
text-align: center;
margin: 15px auto;
}
.logo {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
}
.navbar-toggle {
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
color: rgba(255, 255, 255, 0.8);
font-size: 24px;
}
.active {
display: block;
}
And this is the output I'm getting:
I'd like my output to be like this instead (ignore the spacing difference, just my screenshot, but have them split in the center like so):
What's the best way of doing this?
I'm thinking of creating another unorder list and moving it, but I don't know how to do that.
Make use of justify-content: space-between;.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
ul {
list-style-type: none;
}
.nav-links, .logo {
text-decoration: none;
color: #000;
}
.navbar {padding: 20px;}
.navbar, ul {display: flex; flex-direction:row;}
ul li {padding: 0 5px;}
.wrapper {display:flex; justify-content: space-between; width:100%; }
<nav class="navbar">
logo
<div class="wrapper">
<ul class="main-nav" id="js-menu">
<li>
Home
</li>
<li>
Products
</li>
<li>
About Us
</li>
</ul>
<ul class="ul2">
<li>
Contact Us
</li>
<li>
Blog
</li>
</ul>
</div>
</nav>
when over menu the menu slips in HTML.
Codes and view:
https://codepen.io/anon/pen/XvrJpx
Demo:
.menuu {
position: absolute;
z-index: 1;
}
.menuu ul {
text-align: center;
}
.menuu>ul>li {
list-style: none;
float: left;
margin: 5px;
}
.menuu>ul>li>a {
text-decoration: none;
text-transform: uppercase;
background-color: white;
padding: 5px;
font-weight: 600;
font-size: 16px;
}
.menuu ul li a:hover {
color: white;
background-color: black;
}
.menuu ul li ul {
display: none;
}
.menuu li:hover>ul {
display: block;
}
.menuu ul li ul li a {
text-decoration: none;
}
.menuu>ul>li>ul>li {
list-style: none;
text-align: center;
margin: 5px;
padding: 5px;
}
.icerik {
position: absolute;
top: 75px;
}
<div class="menuu">
<ul>
<li>
Anasayfa
</li>
<li>
c
<ul>
<li>
c1
</li>
</ul>
</li>
<li>
a
</li>
<li>
Programlama
<ul>
<li>
<a>Android</a>
</li>
<li>
Java
</li>
<li>
Php
</li>
<li>
Html
</li>
<li>
Css
</li>
<li>
Javascript
</li>
</ul>
</li>
<li>
Turizm
</li>
<li>
Origami
</li>
<li>
Bebek
<ul>
<li>
Bebeklerin Aylık Gelişimi
</li>
</ul>
</li>
<li>
İletişim
</li>
</ul>
</div>
<div class="icerik">Önceden İçerik Aşağı kayıyordu email de dediğiniz gibi projeme position absolute ekledim kaymıyor. Teşekkür ederim. Şimdi Tek sorun Bebek Bölümü ve C bölümü üstüne gelince yana kayıyorlar ve yanındakini de kaydırıyorlar</div>
Menu C and menu Bebek have submenu. When over menu the menu slips. I doesn’t would slip.
How I can resolve this problem?
I need your help.
All you have to do is remove the browsers default ul styles, as it is adding 40px of padding to the left, and position the sub-menu items absolutely.
In your case, this will work:
ul li ul {
padding: 0;
position: absolute;
}
To make the sub-menu easier to read, I would recommend having a background and some sort of border. eg:
ul li ul {
padding: 0;
position: absolute;
background: white;
border: 1px solid black;
}
Remove > ul from
.menuu li:hover {
display: block;
}
so that menu doesnt slip
Hope this is what you need
.menuu {
position: absolute;
z-index: 1;
}
.menuu ul {
text-align: center;
}
.menuu>ul>li {
list-style: none;
float: left;
margin: 5px;
}
.menuu>ul>li>a {
text-decoration: none;
text-transform: uppercase;
background-color: white;
padding: 5px;
font-weight: 600;
font-size: 16px;
}
.menuu ul li a:hover {
color: white;
background-color: black;
}
.menuu ul li ul {
display: none;
}
.menuu li:hover {
display: block;
}
.menuu ul li ul li a {
text-decoration: none;
}
.menuu>ul>li>ul>li {
list-style: none;
text-align: center;
margin: 5px;
padding: 5px;
}
.icerik {
position: absolute;
top: 75px;
}
<div class="menuu">
<ul>
<li>
Anasayfa
</li>
<li>
c
<ul>
<li>
c1
</li>
</ul>
</li>
<li>
a
</li>
<li>
Programlama
<ul>
<li>
<a>Android</a>
</li>
<li>
Java
</li>
<li>
Php
</li>
<li>
Html
</li>
<li>
Css
</li>
<li>
Javascript
</li>
</ul>
</li>
<li>
Turizm
</li>
<li>
Origami
</li>
<li>
Bebek
<ul>
<li>
Bebeklerin Aylık Gelişimi
</li>
</ul>
</li>
<li>
İletişim
</li>
</ul>
</div>
<div class="icerik">Önceden İçerik Aşağı kayıyordu email de dediğiniz gibi projeme position absolute ekledim kaymıyor. Teşekkür ederim. Şimdi Tek sorun Bebek Bölümü ve C bölümü üstüne gelince yana kayıyorlar ve yanındakini de kaydırıyorlar</div>
Hello I'm a beginner and got a problem with my navigationbar in HTML. I've tried a lot but they are still unclickable...
Is there a mistake in my HTML?
<header>
<nav display: inline;>
<ul>
<li>
<navi><img src="images/header_logo.png" alt="Logo" href="index.html" width="40%" height="40%" /></navi>
</li>
<li>
<navi>
<z class="active" href="index.html">Startseite</z>
</navi>
</li>
<li>
<navi>
<z href="produkte.html">Produkte</z>
</navi>
</li>
<li>
<navi>
<z href="about.html">Über uns</z>
</navi>
</li>
<li>
<navi>
<z href="agb.html">AGB</z>
</navi>
</li>
</ul>
</nav>
or is the mistake in my CSS? It's probably not the best way to style it but it looks good in my eyes. However I cant click any links...
body {
margin: 0px;
padding: 0px;
}
img {
max-width: 100%;
}
ul {
margin: 0px;
list-style: none;
padding: 0px;
overflow: hidden;
background-color: burlywood;
}
li navi {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li navi z {
float: left;
display: block;
text-align: center;
padding: 14px 30px;
margin-top: 40px;
color: white;
border: 2px solid white;
}
.active {
background-color: #deae6f;
}
li z:hover:not(.active) {
background-color: #deb27a;
}
Thanks for help
Here's the link for Your above Problem https://jsfiddle.net/kj0w9g76/
Reason:- for anchor tag we use 'a' not with 'z'
instead of navi tag we use nav tag as used in code below.
body {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
}
ul {
margin: 0;
list-style: none;
padding: 0;
overflow: hidden;
background-color: burlywood;
position: relative;
z-index: 1;
}
li nav {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li nav z {
float: left;
display: block;
text-align: center;
padding: 14px 30px;
margin-top: 40px;
color: white;
border: 2px solid white;
}
.active {
background-color: #deae6f;
}
li a:hover:not(.active) {
background-color: #deb27a;
}
<header>
<nav style="display: inline;">
<ul>
<li>
<nav><a href="index.html" width="40%" height="40%" ><img src="images/header_logo.png" alt="Logo"/></a></navi>
</li>
<li>
<nav>
<a class="active" href="index.html">Startseite</a>
</nav>
</li>
<li>
<nav>
Produkte
</nav>
</li>
<li>
<nav>
Über uns
</nav>
</li>
<li>
<nav>
AGB
</nav>
</li>
</ul>
</nav>
</header>
You've a problem in your code, styles, anchors are not correct there is the correct code below.
* {
box-sizing: border-box;
}
body {
margin: 0px;
padding: 0px;
}
img {
max-width: 100%;
}
ul {
margin: 0px;
list-style: none;
padding: 0px;
overflow: hidden;
background-color: burlywood;
}
li nav {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li a {
float: left;
display: block;
text-align: center;
padding: 14px 30px;
margin-top: 40px;
color: white;
border: 2px solid white;
}
.active {
background-color: #deae6f;
}
li a:hover:not(.active) {
background-color: #deb27a;
}
<header>
<nav style="display: block;">
<ul>
<li>
<nav><img src="images/header_logo.png" alt="Logo" href="index.html" width="40%" height="40%" /></nav>
</li>
<li>
<nav>
<a class="active" href="index.html">Startseite</a>
</nav>
</li>
<li>
<nav>
Produkte
</nav>
</li>
<li>
<nav>
Über uns
</nav>
</li>
<li>
<nav>
AGB
</nav>
</li>
</ul>
</nav>
</header>