Is it possible to locate the hamburger icon in the fixed menu bar?
I tried to put the element inside the class="sidenav" in the body tag but the I couldn't find the icon.
span {
font-size: 30px;
cursor: pointer;
position: absolute;
}
/* Style the navigation bar */
.navbar {
width: 100%;
margin-left: 0px;
background-color: #555;
overflow: auto;
}
/* Navbar links */
.navbar a {
float: left;
text-align: center;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
<body>
<div id="main">
<span onclick="openNav()">☰</span>
<div class="navbar">
Home
Search
Contact
Login
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fas fa-search"></i></button>
</div>
</div>
</body>
Expectation
Reality
Try this, I noticed a few things that can be improved on you code, for one, you can use Flexbox to align all items on a single row quite easily; removing the absolute position from the nav icon so everything behaves normally, this also lets you remove the float property. Then the you can wrap your links in another div (or a ul tag) and push them to right with margin-left: auto
span {
font-size: 30px;
cursor: pointer;
}
/* Style the navigation bar */
.navbar {
width: 100%;
background-color: #555;
display: flex;
align-items: center;
}
/* Navbar links */
.navlinks{
margin-left: auto;
}
.navbar a {
text-align: center;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
<body>
<div id="main">
<div class="navbar">
<span onclick="openNav()">☰</span>
<div class="navlinks">
Home
Search
Contact
Login
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fas fa-search"></i></button>
</div>
</div>
</div>
You can fix your issue with 2 lines on CSS:
#main {
display: flex;
justify-content: space-between;
}
http://jsfiddle.net/r24uyeq5/
You can set 'margin-left' a value equal to the width of the icon to navBar
.navbar {
width: 100%;
margin-left: 100px;//Icon width
background-color: #555;
overflow: auto;
}
Related
I am making a sidebar and am new to css. I created a div which represents a closed sidebar. It is supposed to only show the icons. Unfortunately the icons come in a misaligned manner inside the div based on their size. How do I fix this?
.sidenav {
height: 492px;
width: 300px;
background-color: #db3d44;
}
.data-icon {
font-size: 45px;
color: black;
opacity: 0.5;
float: left;
margin-left: 9px;
margin-top: 5px;
margin-bottom: 10px;
}
.hamburger {
background-color: transparent;
border-color: transparent;
color: white;
margin-left: 10px;
margin-top: 4px;
font-size: 25px;
}
.hamburger:hover {
color: black;
}
.sidenav-closed {
width: 65px;
float: left;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="sidenav-closed sidenav">
<button class="hamburger data-disappear">☰</button>
<div class="icons-only">
<div class="data-icon">
<i class="fa fa-home"></i>
</div>
<div class="data-icon">
<i class="fa fa-car"></i>
</div>
<div class="data-icon">
<i class="fa fa-home"></i>
</div>
</div>
</div>
The car icon is misaligned here. What's the solution?
You could try to align all the icons to the center so your .data-icon class could look like this:
.data-icon {
font-size: 45px;
color: black;
opacity: 0.5;
display: block;
width: 100%;
text-align: center;
}
Your div elements doesn't have set width and height in CSS - so the icons are strictly aligned inside them.
If you want to vertically center them and learn something new use flexbox:
.icons-only {
display: flex;
flex-direction: column;
align-items: center;
}
and
.data-icon {
...
margin-left:0
}
Your car icon is also a little bit bigger than house - you can a little change it size by add new class to it or use this:
.data-icon:nth-child(2) {
font-size: 40px;
}
This CSS code will take second (=2) element with class .data-icon and set different font size for it
The icons are inline elements so they will be left aligned by default. Add in that the icons are not that same size (this is normal), you get an uneven alignment.
To remedy this, add text-align: center to .icons-only.
Note: Given the layout in the example, it does not appear necessary to float .data-icon to the left.
.sidenav {
height: 492px;
width: 300px;
background-color: #db3d44;
}
.icons-only {
text-align: center;
}
.data-icon {
color: rgba( 0, 0, 0, 0.5 );
font-size: 45px;
}
.hamburger {
background-color: transparent;
border-color: transparent;
color: white;
margin-left: 10px;
margin-top: 4px;
font-size: 25px;
}
.hamburger:hover {
color: black;
}
.sidenav-closed {
width: 65px;
float: left;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="sidenav-closed sidenav">
<button class="hamburger data-disappear">☰</button>
<div class="icons-only">
<div class="data-icon">
<i class="fa fa-home"></i>
</div>
<div class="data-icon">
<i class="fa fa-car"></i>
</div>
<div class="data-icon">
<i class="fa fa-home"></i>
</div>
</div>
</div>
I have an image ('repairPic') I would like to align to the right which is no problem, and two elements ('repairTitle & repairBtn') I would like to stack on top of each other on the left side. I would like to use flexbox because I think it's a great way to set up a site.
I'm pretty new to html and css and this is the first real project I'm working on so any help would be much appreciated!
Here's the HTML.
<!DOCTYPE html>
<html>
<head>
<title>Quandtico | Home</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header id="top" class="main-header">
<div class="top-nav">
<ul class="info">
<li>quandticoguitars#gmail.com</li>
<li>810-304-2166</li>
<li id="f1"><img class="fbook" src="imgs/facebook-f-brands.svg"/></li>
</ul>
</div>
<div class="main-nav">
<ul class="nav">
<li><h2>Quandtico</h2></li>
<li id='home'><a href='#'>Home</a></li>
<li><a href='#'>Repair Rates</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Custom Guitars</a></li>
</ul>
</div>
</header>
<div class="intro">
<h1 id="quandtico">QUANDTICO GUITARS & REPAIRS</h1>
<p>Looking for a new guitar? Need a repair done that you want done right? We’ve got it all here at Quandtico. Whether you’re looking for a custom built guitar, the highest quality repair, or just a tune up, we’ve got you covered. We’re located in the thumb of Michigan , and we make sure our customer receives only the best quality products and service. Contact us today to see what we’ve got in store for you!</p>
</div>
<div class="main">
<div class="repair">
<ul id="repairList">
<li class="repairTitle">
<h4>Repair</h4>
</li>
<li class="repairBtn">
<button>Repair Rates</button>
</li>
<li>
<img id="repairPic" src="imgs/bald-eagle-flying-water.jpg"/>
</li>
</ul>
</div>
<div class="build">
<h4>Build</h4>
<button class="build-btn">Custom Guitar</button>
<img id="buildPic" src="../"/>
</div>
<div class="best">
<img src="../"/>
<h4>Only The Best</h4>
</div>
</div>
<div class="contact">
<form action="index.html" method="post">
<h1>Contact</h1>
<fieldset>
<input placeholder="Name" type="text" id="name" name="user_name">
<input placeholder="Email" type="email" id="mail" name="user_email">
<input placeholder="Subject" type="text" id="subject" name="subject">
<textarea placeholder="Message" cols="50">
</textarea>
<button class="send">Send</button>
</fieldset>
</form>
</div>
<footer class="foot">
<p>quandticoguitars#gmail.com</p>
<img class="fbook" src="imgs/facebook-f-brands.svg"/>
<p>© by Quandtico.</p>
</footer>
</body>
</html>
And here's the CSS. I'm looking specifically at the Repair and Build Sections. Right now I'm only working on the "repair" div. Once I get that figured out I can move on to the build section.
/* Base Styles ------*/
* {
box-sizing: border-box;
}
body {
font-family: 'Anton', sans-serif;
background-color: #fbeee6;
margin: 0;
display: flex;
flex-direction: column;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
color: #fbeee6;
}
h2 {
letter-spacing: .2em;
font-size: 2em;
padding-left: .8em;
margin-right: auto;
}
.fbook {
width: 1em;
height: 1em;
}
/* Header Section ---- */
.main-header {
background-color: #284c5e;
color: #fbeee6;
}
.top-nav {
margin-top: 1em;
border-bottom: 1px solid rgba(251, 238, 230, .25);
}
.top-nav .info {
display: flex;
flex-direction: row;
justify-content: flex-start;
padding-left: 15%;
padding-right: 15%;
}
.main-nav {
margin-top: -1em;
}
.main-nav .nav {
display: flex;
flex-direction: row;
padding-left: 15%;
padding-right: 15%;
}
.nav li {
display: inline-flex;
align-items: center;
}
#home {
margin-left: auto;
}
.info a {
text-align: center;
display: block;
padding: .85em 1.3em;
}
.nav a {
padding-left: 1em;
}
#f1 {
margin-left: auto;
}
/* Intro Section -----*/
.intro {
width: 100%;
height: 38em;
color: #fbeee6;
text-align: center;
vertical-align: middle;
background: url('../imgs/E-kit.jpg') no-repeat center;
background-size: cover;
}
#quandtico {
letter-spacing: .1em;
font-size: 5em;
text-align: center;
margin: 2em 20% 0 20%;
}
.intro p {
margin-left: 25%;
margin-right: 25%;
line-height: 1.5em;
}
/* Repair and Build Sections -----*/
#repairList {
display: flex;
flex-wrap: wrap;
height: 569px;
width: 100%;
justify-content: space-between;
}
#repairPic {
display: block;
margin-left: auto;
}
.repairTitle {
display: inline-flex;
margin: auto;
}
.repairBtn {
margin: auto;
}
One solution is to merge the first two li tags into one, wrapping each in a div.
<ul id="repairList">
<li>
<div class="repairTitle">
<h4>Repair</h4>
</div>
<div class="repairBtn">
<button>Repair Rates</button>
</div>
</li>
<li>
<img id="repairPic" src=""/>
</li>
</ul>
Setting the h4 and button to display: block will also work if you'd prefer to avoid the extra divs.
These solutions avoid the common issues that arise from float positioning.
You could modifiy ccs of id repairList.
#repairList {
display: flex;
flex-wrap: nowrap;
height: 569px;
/* width: 100%; */
justify-content: space-between;
display: block;
float: right;
clear: right;
.repair {
display: flex; /*added*/
text-align: center;/*added*/
}
#repairList {
/* display: flex */remove
flex-wrap: wrap;
height: 569px;
width: 100%;
justify-content: space-between;
}
I'm trying to align some items to the left, but I don't know what I'm doing wrong.
I'm making the youtube header, and at this time, I've done this
I got to align the first two items to the right with a simple padding, but when it comes to the left side of the header, nothing works. I've used align-items but they do not move.
this is my html code:
header {
width: 100%;
padding: 0px;
/*FLEX*/
display: flex;
flex-direction: row;
border-bottom: 1px solid #000;
}
header .youtube nav a span {
color: red;
padding: 5px;
line-height: 50px;
}
header .menu nav a span {
padding: 30px;
line-height: 50px;
}
header .bloque nav a span {
line-height: 50px;
align-items: flex-end;
}
header .bloque nav img {
line-height: 50px;
align-items: flex-end;
width: 50;
}
<header>
<div class="menu">
<nav>
<span class="icon-menu"></span>
</nav>
</div>
<div class="youtube">
<nav>
<span class="icon-youtube"></span>YouTube
</nav>
</div>
<form>
<fieldset>
<input type="search" placeholder="Search">
<button type="submit">
<span class="icon-magnifying-glass"></span>
</button>
</fieldset>
</form>
<div class="bloque">
<nav>
<span class="icon-camera"></span>
<span class="icon-grid"></span>
<span class="icon-forward"></span>
<span class="icon-globe"></span>
<img src="guía.png" width="100">
</nav>
<div/>
</header>
when I use justify-content:Space-round, the items are placed the way I want to, but not properly spaced between them. But for some strange reason when I use align-item:flex-end they are arranged like in the pic related. how do I solve this? any advice?
To align items within the header tag you need to add justify-content: flex-end; to the header to read more about it Check this site
header {
width: 100%;
padding: 0px;
/*FLEX*/
display: flex;
flex-direction: row;
justify-content: flex-end;
/* justify-content: flex-end;*/ /*uncomment to align left*/
align-items: center; /* to vertical align items */
border-bottom: 1px solid #000;
}
header .youtube nav a span {
color: red;
padding: 5px;
line-height: 50px;
}
/* header .menu nav a span {
padding: 30px;
line-height: 50px;
} */
header .bloque nav a span {
line-height: 50px;
align-items: flex-end;
}
header .bloque nav img {
line-height: 50px;
align-items: flex-end;
width: 50;
}
<header>
<div class="menu">
<nav>
<span class="icon-menu"></span>
</nav>
</div>
<div class="youtube">
<nav>
<span class="icon-youtube"></span>YouTube
</nav>
</div>
<form>
<fieldset>
<input type="search" placeholder="Search">
<button type="submit">
<span class="icon-magnifying-glass"></span>
</button>
</fieldset>
</form>
<div class="bloque">
<nav>
<span class="icon-camera"></span>
<span class="icon-grid"></span>
<span class="icon-forward"></span>
<span class="icon-globe"></span>
<img src="guía.png" width="100">
</nav>
<div/>
</header>
I've been trying to solve this for 2 days now and tried everything I can think of. Ive tried a thousand combos of position, display, and floats.
I am trying to make a vertical navigation bar in which the content of the navigation buttons comes out as a 2nd tier of vertical buttons and from the second set comes a 3rd tier of vertical buttons, etc.
My problem is that the 2nd tier of buttons displaces the buttons in 1st tier. Strangely the 3rd tier does not displace the 2nd or 1st tier.
I have attached a JSfiddle.
<html>
<head>
<style>
.dropdown {
position: relative;
display: block;
clear: both;
margin: 5px;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
float: left;
min-width: 100px;
margin-top: 5px;
}
.dropdown-options {
display: none;
min-width: 160px;
z-index: 1;
}
.dropbtncontent {
min-width: 160px;
border: none;
font-size: 16px;
background-color: #4CAF50;
color: white;
padding: 2px;
text-decoration: none;
margin: 2px;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
}
.dropdown:hover .dropdown-options {
display: block;
}
.dropdown-options:hover .dropdown-content {
display: inline-block;
}
.dropdown-content a {
background-color: #4CAF50;
color: white;
padding: 2px;
text-decoration: none;
margin: 2px;
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">Dropdown1</button>
<div class="dropdown-options">
<button class="dropbtncontent">Dropdown1.1</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown-options">
<button class="dropbtncontent">Dropdown1.2</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown-options">
<button class="dropbtncontent">Dropdown1.3</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown2</button>
<div class="dropdown-content">
Link 3
Link 2
Link 4
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown3</button>
<div class="dropdown-content">
Link y
Link r
Link a4
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown4</button>
<div class="dropdown-content">
Lin
Lin 2
Lk 4
</div>
</div>
</body>
</html>
If anyone has any suggestions, I'd really appreciate it.
You can achieve the desired effect by changing your .dropbox class to this:
.dropdown {
position: relative;
display: block;
clear: both;
margin: 5px;
//new code below
overflow:show;
height: 50px;
}
The fixed height would cause some of the 2nd tier options to show until it reached the height.
With that, by setting overflow:show you allow children to show even if they're bigger than it's parent size without affecting other elements.
I am trying to align two buttons in the middle of the screen in HTML. When I try using text-align: center; it is not working. Below is my code for the button.
<style>
.button {
margin-top: 15px;
background-color: #0066FF;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
<body>
<div class="floated run">
<form action="aboutus.html">
<button class="button">See Projects</button>
</form>
</div>
<div class="floated run">
<form action="end.html">
<button class="button">About Us</button>
</form>
</div>
</body>
I am aware there are multiple answers to this question, but none of them have helped me so far.
You can just use Flexbox to get what you what and slightly change your markup.
So you'll need a wrapper with .flex class, and children with .flex-item classes.
.flex {
display: flex;
justify-content: center;
}
.flex-item + .flex-item {
margin-left: 10px;
}
.button {
margin-top: 15px;
background-color: #0066FF;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
<div class="flex">
<form action="aboutus.html" class="flex-item">
<button class="button">See Projects</button>
</form>
<form action="end.html" class="flex-item">
<button class="button">About Us</button>
</form>
</div>
The solution here is that because you have the buttons inside divs and forms, any CSS you apply directly to the buttons will not work - you will need to position the divs first:
https://jsfiddle.net/o2gxgz9r/6967/
The essence of this example is this CSS:
.floated {
width: 48%;
float: left;
padding: 1%;
}
.first {
text-align: right;
}
With this HTML:
<div class="floated run first">
<form action="aboutus.html">
<button class="button">See Projects</button>
</form>
</div>
<div class="floated run">
<form action="end.html">
<button class="button">About Us</button>
</form>
</div>
Note that I have added a class .first to the first div.
You can float your button to left, add a little left margin, wrap it with one div, and than position it to center:
<style>
.button {
margin-top: 15px;
margin-left: 10px;
background-color: #0066FF;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
float: left;
font-size: 16px;
cursor: pointer;
}
.button-wrapper{
width: 55%;
margin: 0 auto;
}
</style>
<body>
<div class="button-wrapper">
<div class="floated run">
<form action="aboutus.html">
<button class="button">See Projects</button>
</form>
</div>
<div class="floated run">
<form action="end.html">
<button class="button">About Us</button>
</form>
</div>
</div>
</body>
Easy
Give a div.floated width:100% and text-align:center
check -
div.floated {
width:100%;
text-align:center;
}