I can't seem to make my social media icons be responsive when in cellular mode. it stays to the very corner of the right. I would like it to be centered /horizontally right under the bio section. I'm finding it a bit difficult because I'm not using bootstrap for this feature, just basic ul list. If anyone can help, i would appreciate it.
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="about1.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="home.html"><img class="avatar" src="images/Originals/avatar.jpg" alt>Munoz Designs</a>
<!--Toggle Button-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<!--Navbar links-->
<div class="collapse navbar-collapse text-center" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link"
href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="gallery.html">Gallery</a>
</li>
<!--Social Media Icons-->
<li class="nav-item">
<a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://twitter.com/arkadiusart" title="Follow on Twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="index.php" title="Email">
<i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</ul>
</div>
</div>
</nav>
<div class="intro">
<h1>About</h1>
</div>
<main>
<div class="row">
<div class="col"><p> <h5> Eddie Munoz is an Austin, Texas based character artist currently working with QC Games, a video game development company. He previously worked at Carbine Studios in Aliso Viejo, California helping create various creatures, armors, mounts, and weapons for WildStar; a free-to-play online game. Be sure to follow him on instagram for his latest projects. <h5><br></div>
<!-- <img src="images/hammer.gif" alt="" width="200" height="275"><-->
</div>
</main>
<footer class="page-footer">
<ul>
<li>
<i class="fa fa-instagram fa-lg" aria-hidden="true" style="color:white"></i>
<li>
<i class="fa fa-linkedin-square fa-lg" aria-hidden="true" style="color:white"></i>
<li>
<i class="fa fa-twitter fa-lg" aria-hidden="true" style="color:white"></i>
<li>
<i class="fa fa-deviantart fa-lg" aria-hidden="true" style="color:white"></i>
<li>
<i class="fa fa-paint-brush fa-lg" aria-hidden="true" style="color:white"></i>
<li>
<a href="index.php" title="Email">
<i class="fa fa-envelope-o fa-lg" aria-hidden="true" style="color:white"></i></a>
</ul>
</li>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
html{
box-sizing: border-box;}
*,
*: before,
*: after {
box-sizing: inherit;
padding: 0;
margin: 0;
}
body{
background-image: url();
width: 100%;
height: 100%;
background-position: bottom center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family:"Quicksand";
font-size: 1.2em;
line-height: 1.375em;
padding: 0;
margin: 0;
background-color: #2F3A3B;
-webkit-font-smoothing: antialiased;
}
navbar-brand{
height: 3em;
width: 3em;
margin-top: -8px;
border-radius: 5.0em;
margin-right: 1em;
margin-left: -5em;
margin-bottom: -8px
}
.avatar{
border-radius: 5em;
margin-right: .5em;
margin-left: 1em;
}
.intro{
display: inline-block;
width: 100%;
padding: 65px 0 65px;
background-color: #2A2332;
background-size: cover;
font-size: 1.9em;
text-align: center;
color: #FFF;
}
h1{
font-weight: medium;
text-shadow:5px 5px 10px black;
position: center;
}
h5{
color: #FFF;
margin: 10px 75px 10px;
padding-left: 2px;
padding-right: 2px;
font-size: .9em;
}
.row{
display: flex;
flex-flow: column wrap;
margin-left: .6em;
margin-right: .6em;
}
.col{
flex: 1;
margin: .5em;
padding: 15px 75px 15px;
color: #FFF;
font-size: .9em;
}
.page-footer{
display:flex;
margin: 10px 475px 10px;
list-style-type: none;
}
.page-footer ul{
align-items:center;
}
.page-footer ul li{
display:inline-block;
margin-right: 20px;
margin-left: 20px;
}
#media screen and (min-width: 640px){
.row{flex-flow: row wrap;}
main .col:nth-child(2){flex: 1;}
}
#media screen and (min-width: 960px){
main .col:nth-child(2){flex: .40;}
}
main {flex: 1;}
try this (i gave the ul a class to avoid affecting other uls in the page) :
ul.social-icons {
display: block;
margin: 0 auto;
text-align: center
}
ul.social-icons li {
display: inline-block;
}
Related
The other elements of the navbar do not appear on my mobile devices, only the logo.
NavBar HTML Code:
.navbar-logo {
width: 93.75px;
height: 23.5px;
margin-left: 10rem;
}
.navbar-right-space {
margin-right: 10rem;
}
.nav-icon {
color: #fff;
text-decoration: none;
font-size: 26px;
transition: 0.5s;
}
.nav-icon:hover {
font-size: 28px;
color: #fff;
}
#navRight .nav-item {
margin-left: 10px;
}
#navElements {
margin-top: 0.75rem;
}
#navRight {
margin-right: 10rem;
}
<!-- NavBar -->
<nav data-aos="fade-down" class="navbar navbar-expand-lg navbar-light bg-transparent">
<a class="navbar-brand" href="https://ionut.app/"><img src="assets/img/logo_light.png" alt="Ionut Logo" class="navbar-logo"></a>
<div class="collapse navbar-collapse" id="navElements">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0" id="navRight">
<li class="nav-item">
<a class="fab fa-github nav-icon" target="_blank" href="https://github.com/wIonut"></a>
</li>
<li class="nav-item">
<a class="fab fa-instagram nav-icon" target="_blank" href="https://www.instagram.com/patrascu.ionut.2008/"></a>
</li>
<li class="nav-item">
<a class="fab fa-facebook nav-icon" target="_blank" href="https://www.facebook.com/patrascu.ionut.2008/"></a>
</li>
</ul>
</div>
</nav>
<!-- End of Nav Bar -->
Anything inside the collapsible element gets hidden for mobile. It's presumed that you'll show it with a toggle button (which you don't have). See the docs.
.navbar-logo {
width: 93.75px;
height: 23.5px;
margin-left: 10rem;
}
.navbar-right-space {
margin-right: 10rem;
}
.nav-icon {
/* color: #fff; */
text-decoration: none;
font-size: 26px;
transition: 0.5s;
}
.nav-icon:hover {
font-size: 28px;
color: #fff;
}
#navRight .nav-item {
margin-left: 10px;
}
#navElements {
margin-top: 0.75rem;
}
#navRight {
margin-right: 10rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<nav data-aos="fade-down" class="navbar navbar-expand-lg navbar-light bg-transparent">
<a class="navbar-brand" href="https://ionut.app/"><img src="https://via.placeholder.com/80" alt="Ionut Logo" class="navbar-logo"></a>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0" id="navRight">
<li class="nav-item">
<a class="fab fa-github nav-icon" target="_blank" href="https://github.com/wIonut">Github</a>
</li>
<li class="nav-item">
<a class="fab fa-instagram nav-icon" target="_blank" href="https://www.instagram.com/patrascu.ionut.2008/">Instagram</a>
</li>
<li class="nav-item">
<a class="fab fa-facebook nav-icon" target="_blank" href="https://www.facebook.com/patrascu.ionut.2008/">Facebook</a>
</li>
</ul>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
I am using icons from this website - https://iconscout.com/unicons/explore/line
Icons are displayed correctly. When I apply the hover effect using it is not working.
My index.html script
<header class="header" id="header">
<nav class="nav container">
LOGo
<div class="nav__menu" id="nav_menu">
<ul class="nav__list grid">
<li class="nav_item">
<a href="#home" class="nav__link">
<i class="uil uil-estate nav__icons"></i>Home
</a>
</li>
<li class="nav_item">
<a href="#about" class="nav__link">
<i class="uil uil-user nav__icons"></i>About
</a>
</li>
<li class="nav_item">
<a href="#skills" class="nav__link">
<i class="uil uil-file-alt nav__icons"></i>Skills
</a>
</li>
<li class="nav_item">
<a href="#services" class="nav__link">
<i class="uil uil-briefcase-alt nav__icons"></i>Services
</a>
</li>
<li class="nav_item">
<a href="#portfolio" class="nav__link">
<i class="uil uil-scenery nav__icons"></i>Portfolio
</a>
</li>
<li class="nav_item">
<a href="#contact" class="nav__link">
<i class="uil uil-message nav__icons"></i>Contactme
</a>
</li>
</ul>
<i class="uil uil-times nav_close" id="nav-close"></i>
</div>
<div class="nav_btns">
<div class="nav__toggle" id="nav-toggle">
<i class="uil uil-apps"></i>
</div>
</div>
</nav>
</header>
In my CSS file, I searched the solution many suggested that to use !important after color but still, it is not working.
.nav__logo .nav__toggle {
color: var(--title-color);
font-weight: var(--font-medium);
}
.nav__logo:hover {
color: var(--first-color);
}
.nav__toggle {
font-size: 1.1rem;
cursor: pointer;
}
.nav__toggle:hover {
color: var(--first-color) !important;
}
#media screen and (max-width: 767px) {
.nav__menu {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: var(--body-color);
padding: 2rem 1.5rem 4rem;
box-shadow: 0 -1px 4px rgba(0, 0, 0, .15);
border-radius: 1.5rem 1.5rem 0 0;
transition: .3s;
}
}
.nav__list {
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.nav__link {
display: flex;
flex-direction: column;
align-items: center;
font-size: var(--small-font-size);
color: var(--title-color);
font-family: var(--font-medium);
}
.nav__link:hover {
color: var(--first-color) !important;
}
.nav__icons {
font-size: 1.2rem;
}
.nav__icons:hover {
color: var(--first-color) !important;
}
.nav__close {
position: absolute;
right: 1.3rem;
bottom: .5rem;
font-size: 1.5rem;
cursor: pointer;
color: var(--first-color);
}
.nav__close:hover {
color: var(--first-color-alt);
}
I have also used !important but still it is not working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<title>EJemplo</title>
</head>
<body>
<header class="header" id="header">
<nav class="nav container">
LOGo
<div class="nav__menu" id="nav_menu">
<ul class="nav__list grid">
<li class="nav_item">
<a href="#home" class="nav__link">
<i class="uil uil-estate nav__icons"></i>Home
</a>
</li>
<li class="nav_item">
<a href="#about" class="nav__link">
<i class="uil uil-user nav__icons"></i>About
</a>
</li>
<li class="nav_item">
<a href="#skills" class="nav__link">
<i class="uil uil-file-alt nav__icons"></i>Skills
</a>
</li>
<li class="nav_item">
<a href="#services" class="nav__link">
<i class="uil uil-briefcase-alt nav__icons"></i>Services
</a>
</li>
<li class="nav_item">
<a href="#portfolio" class="nav__link">
<i class="uil uil-scenery nav__icons"></i>Portfolio
</a>
</li>
<li class="nav_item">
<a href="#contact" class="nav__link">
<i class="uil uil-message nav__icons"></i>Contactme
</a>
</li>
</ul>
<i class="uil uil-times nav_close" id="nav-close"></i>
</div>
<div class="nav_btns">
<div class="nav__toggle" id="nav-toggle">
<i class="uil uil-apps"></i>
</div>
</div>
</nav>
</header>
</body>
</html>
<!- Solo necesita agregar
de la pagina de ellos
https://iconscout.com/unicons/getting-started/line-->
I'm not sure I understand, but it seems to me you're not setting and :hover effect anywhere. You need to add something like:
.nav_item a:hover i{
color:red;
}
then your icon will become red when hovering the link. You also need to add
.nav_item a:hover{
color:red;
}
to have the link also turn red
You have to add css in the :before selector like this : .uil-18-plus:hover:before
I'm very happy with my bootstrap contact form, however when I minimize it down to cellular level it disappears and I have to scroll all the way to the right. Can anyone help me with my CSS to size it down perfectly?
Also, is there any way to make the toggle buttons center when they visible rather than floating to the left.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="contact.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="home.html"><img class="avatar" src="images/Originals/avatar.jpg" alt>Munoz Designs</a>
<!--Toggle Button-->
<button class="navbar-toggler" type="button" data-toggle="collapse"data-target="#navbarResponsive"aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<!--Navbar links-->
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link"
href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="gallery.html">Gallery</a>
</li>
<!--Social Media Icons-->
<li class="nav-item">
<a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://twitter.com/arkadiusart" title="Follow on Twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" title="Email">
<i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</ul>
</div>
</div>
</nav>
<div class="intro">
<h1>Contact</h1>
<h4>If you would like to work with me, send me a message!</h4>
</div>
<!--Contact-->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="well well-sm">
<form class="form-horizontal" method="post">
<fieldset>
<div class="form-group">
<div class="col-md-8">
<div class="input-wrapper">
<input id="fname" name="name" placeholder="Name" type="text" class="form-control">
<label for="fname" class="fa fa-user input-icon bigicon"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<div class="input-wrapper">
<input id="email" name="email" type="text" placeholder="Email" class="form-control">
<label for="email" class="fa fa-envelope-o input-icon bigicon"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<div class="input-wrapper">
<textarea class="form-control" id="message" name="message" placeholder="Message" rows="3"></textarea>
<label for="message" class="fa fa-pencil input-icon bigicon"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-outline-secondary btn-md">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
html{
box-sizing: border-box;}
*,
*: before,
*: after {
box-sizing: inherit;
padding: 0;
margin: 0;
}
body{background-image: url();
width: 100%;
height: 100%;
background-position: bottom center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family:"Quicksand";
font-size: 1.2em;
line-height: 1.375em;
padding: 0;
margin: 0;
background-color: #2F3A3B;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
navbar-brand{
height: 3em;
width: 3em;
margin-top: -8px;
border-radius: 5.0em;
margin-right: 1em;
margin-left: -5em;
margin-bottom: -8px
}
.avatar{
border-radius: 5em;
margin-right: .5em;
margin-left: 1em;
}
.intro{
display: inline-block;
width: 100%;
padding: 65px 0 65px;
background-color: #2A2332;
background-size: cover;
font-size: 1.9em;
text-align: center;
color: #FFF;
}
h1{
font-weight: medium;
text-shadow:5px 5px 10px black;
}
h4{
font-size: -.5em;
}
.row{
margin-right: 4em;
margin-left: 4em;
margin-top: .10em;
padding-bottom: -.30em;
}
.container {
margin-left: 17em;
padding-top: 1.5em;
}
.bigicon {
font-size: 35px;
color: #808080;
}
.input-icon {
position: absolute;
left: .5rem;
top: .7rem;
/* Keep icon in center of input, regardless of the input height */
}
#message {
vertical-align: middle;
}
input {
padding-right:30px;
}
.form-control {
text-indent: 2rem;
width: 75%;
}
.input-wrapper {
position: relative;
}
.btn{
margin-right: 10em;
}
#media screen and (min-width: 640px){
}
#media screen and (min-width: 960px){
}
main {flex: 1;}
Perhaps instead of using separate li tags you can use the bootstrap row and column parameters. Try something like this:
<!--Social Media Icons-->
<li class="nav-item">
<div class="row">
<div class="col-xs-2">
<a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</div>
<div class="col-xs-2">
<a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
</div>
<div class="col-xs-2">
<a class="nav-link" href="https://twitter.com/arkadiusart" title="Follow on Twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</div>
<div class="col-xs-2">
<a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>
</div>
<div class="col-xs-2">
<a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>
</div>
<div class="col-xs-2">
<a class="nav-link" title="Email"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</div>
</div>
</li>
I found the answers:
For the contact form to be responsive I deleted the .row in CSS. Once I did that, it was working as a responsive form.
For the toggle buttons to be center, I simply added "text-center" to the collapse property. See below.
<div class="collapse navbar-collapse text-center" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link"
href="about.html">About</a>
</li>
I'm satisfied where my brand is, however I would like my About, Gallery and icons shifted more to the right. As you can see, there is a big gap at the end of the "envelope" icon, I would like it even, just as my brand/avatar is.
I have tried doing ml-auto, mr-auto in the bootstrap code, but nothing has worked.
html {
box-sizing: border-box;
}
*,
*: before,
*: after {
box-sizing: inherit;
padding: 0;
margin: 0;
}
body {
background-image: url();
width: 100%;
height: 100%;
background-position: bottom center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family: "Quicksand";
font-size: 1.2em;
line-height: 1.375em;
padding: 0;
margin: 0;
background-color: #2F3A3B;
-webkit-font-smoothing: antialiased;
}
.avatar {
height: 3em;
width: 3em;
margin-top: -8px;
border-radius: 5.0em;
margin-right: 1em;
margin-left: -5em;
margin-bottom: -8px
}
nav ul li {}
#media screen and (min-width: 640px) {}
#media screen and (min-width: 960px) {}
main {
flex: 1;
}
.intro {
display: inline-block;
width: 100%;
padding: 90px 0 120px;
background-color: #2A2332;
background-size: cover;
font-size: 1.9em;
text-align: center;
color: #FFF;
}
h1 {
font-weight: medium;
text-shadow: 5px 5px 10px black;
}
h4 {}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="home.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container" style="
margin-left: 100px;">
<a class="navbar-brand" href="home.html"><img class="avatar" src="images/Originals/avatar.jpg" alt>Munoz Designs</a>
<!--Toggle Button-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<!--Navbar links-->
<div class="collapse navbar-collapse" style="margin-left: ;" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<!--Social Media Icons-->
<li class="nav-item">
<a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="contact.html" title="Email" target="_blank">
<i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</ul>
</div>
</div>
</nav>
<div class="intro">
<h1>Hi, I'm Eddie.</h1>
<h4>I'm a character artist.</h4>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
As I see you want full width navbar so remove container div, Its unnecessary according to your requirement.
Also you have to change the css for navbar-brand.
Reference Link
Stack Snippet
body {
background-image: url();
width: 100%;
height: 100%;
background-position: bottom center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family: "Quicksand";
font-size: 1.2em;
line-height: 1.375em;
padding: 0;
margin: 0;
background-color: #2F3A3B;
-webkit-font-smoothing: antialiased;
}
.avatar {
height: 3em;
width: 3em;
margin-top: -8px;
border-radius: 5.0em;
}
nav ul li {}
#media screen and (min-width: 640px) {}
#media screen and (min-width: 960px) {}
main {
flex: 1;
}
.intro {
display: inline-block;
width: 100%;
padding: 90px 0 120px;
background-color: #2A2332;
background-size: cover;
font-size: 1.9em;
text-align: center;
color: #FFF;
}
h1 {
font-weight: medium;
text-shadow: 5px 5px 10px black;
}
h4 {}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="home.html"><img class="avatar" src="http://via.placeholder.com/50x50" alt>Munoz Designs</a>
<!--Toggle Button-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<!--Navbar links-->
<div class="collapse navbar-collapse" style="margin-left: ;" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<!--Social Media Icons-->
<li class="nav-item">
<a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="contact.html" title="Email" target="_blank">
<i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</ul>
</div>
</nav>
<div class="intro">
<h1>Hi, I'm Eddie.</h1>
<h4>I'm a character artist.</h4>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
I try to create a navigation menu. Some of the items should get a submenu which will be shown by clicking/hovering the arrow-icon.
But I got some problems to position the submenu correctly
JSFiddle: http://jsfiddle.net/g651mwdu/
<nav>
<div class="nav-button-group"> <span class="nav-button-group-title">Title</span>
<div class="nav-button-container"> <span class='fa fa-plus button-icon'></span>
<span class="button-text">Add</span>
<div class="button-arrow-down"></div>
<div class="submenu">Show some more elements</div>
</div>
<div class="nav-button-container"> <span class='fa fa-cog button-icon'></span>
<span class="button-text">Change</span>
<div class="button-arrow-down"></div>
</div>
<div class="nav-button-container"> <span class='fa fa-link button-icon'></span>
<span class="button-text">Link</span>
</div>
<div class="nav-button-container"> <span class='fa fa-comment-o button-icon'></span>
<span class="button-text">Tooltip</span>
</div>
<div class="nav-button-container"> <span class='fa fa-trash-o button-icon'></span>
<span class="button-text">Remove</span>
</div>
</div>
</nav>
CSS
.nav-button-container {
display: inline-block;
width: 2em;
height: 2.5em;
padding: .25em;
text-align: center;
color: #555;
}
.button-text {
display: block;
font-size: .5em;
margin: .5em 0;
}
.button-icon {
vertical-align: middle;
font-size: 1.3em;
}
.button-arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #B4B4B4;
margin: 0 auto;
}
.line-separator {
display: inline-block;
width: 1em;
}
nav {
background-color: #f2f2f2;
padding: .3em 0;
border-radius: 7px;
}
.nav-button-group {
display: inline-block;
background-color: #fafafa;
padding: .3em;
border-radius: 5px;
}
.nav-button-group-title {
display: block;
font-weight: bold;
font-size: .7em;
color: #555;
padding: 0 .5em;
background-color: #F2F2F2;
border-radius: 4px;
}
Is this what you are trying to achieve (navigation with font awesome icons aligned to the drop-down text)?
You're using buttons to build your menu which isn't necessary (or recommended). Use ul unordered lists and list items li to build your nav. Then inserting icons is pretty straight forward.
<li><i class="fa fa-pencil-square-o fa-fw"></i> Drafts
Example Snippet
.navbar {
border-radius: 0px;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px 6px 6px 6px;
border-radius: 0px;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0px;
height: 0px;
border-color: transparent;
border-style: solid;
border-width: 5px 0px 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #ffffff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0px 6px 6px;
-moz-border-radius: 6px 0px 6px 6px;
border-radius: 6px 0px 6px 6px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav role="navigation" class="navbar navbar-inverse">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> Brand
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Profile
</li>
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><i class="fa fa-envelope-o fa-fw"></i> Inbox
</li>
<li><i class="fa fa-pencil-square-o fa-fw"></i> Drafts
</li>
<li><i class="fa fa-paper-plane-o fa-fw"></i> Sent Items
</li>
<li class="divider"></li>
<li><i class="fa fa-trash-o fa-fw"></i> Trash
</li>
</ul>
</li>
<li>Hello
</li>
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Things <b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><i class="fa fa-envelope-o fa-fw"></i> Inbox
</li>
<li><i class="fa fa-pencil-square-o fa-fw"></i> Drafts
</li>
<li><i class="fa fa-paper-plane-o fa-fw"></i> Sent Items
</li>
<li class="divider"></li>
<li><i class="fa fa-trash-o fa-fw"></i> Trash
<li class="dropdown-submenu"> <a tabindex="-1" href="#"><i class="fa fa-hand-o-right fa-fw"></i> Profile</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#"><i class="fa fa-calendar-o fa-fw"></i> Account</a>
</li>
<li><a tabindex="-1" href="#"><i class="fa fa-folder-open-o fa-fw"></i> Users</a>
</li>
<li><a tabindex="-1" href="#"><i class="fa fa-file-o fa-fw"></i> Login</a>
</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login
</li>
</ul>
</div>
</nav>