I'm having a hell of a time trying to get a background color to show on a div. I have tried specifying width, height, overflow, etc. with no luck. The code is below. I can get inner div background to change, but not the containing div.
The div in question is header-top-container. Any help is greatly appreciated.
.header-top-container {
background: #F0F0F0;
overflow: hidden;
}
.header-top-container>.main-container {
padding-top: 0;
padding-bottom: 0;
display: flex;
}
.main-container {
position: relative;
max-width: 1260px;
margin: 0 auto;
padding: 15px;
}
body .header-top-container .external-store-tab {
width: 360px;
}
body .header-top-container .external-store-tab,
body .header-top-container .account-cart-wrapper {
position: relative;
width: 70%;
}
<div class="header-top-container">
<div class="main-container header-main-container">
<div class="external-store-tab">
<div class="tab-item">
<a href="https://www.example.org">
<img src="https://www.example.org/logo-foundation.png" class="tab-logo">
</a>
</div>
<div class="tab-item active">
<a href="http://store.example.org/">
<img src="https://www.example.org/logo-store.png" class="tab-logo">
</a>
</div>
</div>
<div class="account-cart-wrapper">
<a href="http://www.example.org/contact/" class="account-link hide-mb">
<span class="label" style="color:#008CA8;">
<i class="fa fa-envelope" aria-hidden="true"></i>
<span class="bar-text" tyle="font-family: 'Open Sans',sans-serif;">Contact</span>
</span>
</a>
<a href="tel:800.222.5870" class="account-link">
<span class="label" style="color:#008CA8;">
<i class="fa fa-phone fa-lg" aria-hidden="true"></i>
<span class="bar-text" style="font-family: 'Open Sans',sans-serif;">800.222.5870</span>
</span>
</a>
<a href="https://store.example.org/customer/account/login/" class="skip-link skip-account account-link sign-in-bar">
<span class="label">
<i class="fa fa-user fa-lg" aria-hidden="true"></i>
<span class="bar-text" style="font-family: 'Open Sans',sans-serif;">Sign in</span>
</span>
</a>
<a href="https://store.example.org/checkout/cart/" class="skip-link skip-account account-link">
<span class="label">
<i class="fa fa-shopping-cart fa-lg" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
</div>
Add to class "header-top-container", property "position:inherit" class, like following:
.header-top-container {
background: #F0F0F0;
overflow:hidden;
position: inherit;
}
Your #custom-layer1 has a background that matches the page. Your header-container-top is changing color, but is being 'painted' over so to speak by the background of #custom-layer1.
Related
I'm trying to copy a navbar design. This is the design I want:
And this is the navbar I'm getting:
And this is the figma link of the design: Link
I'm using flexbox and justify-content: space-between. But I'm getting extra spaces that i do not want. Other differences like icons doesn't matter i just need the basic copy of the ui and get rid of those spaces.
This is my code at the moment:
React Navbar.js:
const Navbar = () => {
return (
<nav className={styles.navbar}>
<div className={styles.logoWrapper}>
<img
src={require("../../img/logo.png")}
className={styles.logo}
alt="logo"
/>
</div>
<div className={styles.navLinks}>
<div className={styles.navItemWrapper}>
<i className="fas fa-rss fa-2x"></i>
<a href="#" className={styles.navItem}>
FEED
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="fas fa-user-friends fa-2x"></i>
<a href="#" className={styles.navItem}>
NETWORK
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="fas fa-suitcase fa-2x"></i>
<a href="#" className={styles.navItem}>
JOBS
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="far fa-comment-alt fa-2x"></i>
<a href="#" className={styles.navItem}>
CHAT
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="far fa-bell fa-2x"></i>
<a href="#" className={styles.navItem}>
NOTICES
</a>
</div>
</div>
<div className={styles.searchBarWrapper}>
<i className="fas fa-search fa-2x" style={{ color: "#0275B1" }}></i>
<input type="text" placeholder="Search" className={styles.searchBar} />
</div>
<div className={styles.profileOwner}>
<div className={styles.navAvatarWrapper}>
<img
src="https://unsplash.it/20/20"
alt="avatar"
className={styles.navAvatar}
/>
</div>
<div>
<div>
<h3 className={styles.navProfileName}>User Name</h3>
<span className={styles.navProfileNameSpan}>YOU</span>
</div>
<div>
<p className={styles.navProfileViewCount}>
367 views today<strong>+32</strong>
</p>
</div>
</div>
</div>
<div className={styles.navSubmenu}>
<i className="fas fa-ellipsis-h fa-lg"></i>
<h4 className={styles.navSubmenuTitle}>OTHER</h4>
</div>
</nav>
);
};
SCSS:
.navbar {
width: 100vw;
background: $white;
display: flex;
justify-content: space-between;
align-items: center;
color: $base-text-color;
font-size: $text-md;
line-height: 11px;
}
.navLinks {
display: flex;
justify-content: center;
align-items: center;
border-right: $gray-border;
text-align: center;
}
.logoWrapper {
border-right: $gray-border;
}
.logo {
width: 46px;
height: 46px;
margin: 17px 44px 17px 40px;
}
.navItemWrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 18px 20px;
}
.navItem {
text-decoration: none;
color: $base-text-color;
margin-top: 10px;
}
.searchBarWrapper {
border-right: $gray-border;
// width: 367px;
}
.searchBar {
border: none;
font-size: $text-lg;
font-weight: 300;
padding: 30px;
}
.profileOwner {
display: flex;
justify-content: space-between;
align-items: center;
}
.navAvatar {
width: 42px;
height: 42px;
border-radius: 50%;
margin: 15px;
}
.navProfileName {
display: inline-block;
padding: 10px;
}
.navProfileNameSpan {
font-weight: 300;
}
.navProfileViewCount {
font-weight: 300;
padding: 10px;
}
.navSubmenu {
text-align: center;
border-right: $gray-border;
border-left: $gray-border;
margin-right: 40px;
padding: 18px 23px;
}
.navSubmenuTitle {
margin-top: 21px;
}
Just put the logo div and the Feed , Network div in one container and give some margin-left , you should be good to go.
const Navbar = () => {
return (
<div className={styles.navLinks}>
<div className={styles.logoWrapper}>
<img
src={require("../../img/logo.png")}
className={styles.logo}
alt="logo"
/>
</div>
<div className={styles.navItemWrapper}>
<i className="fas fa-rss fa-2x"></i>
<a href="#" className={styles.navItem}>
FEED
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="fas fa-user-friends fa-2x"></i>
<a href="#" className={styles.navItem}>
NETWORK
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="fas fa-suitcase fa-2x"></i>
<a href="#" className={styles.navItem}>
JOBS
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="far fa-comment-alt fa-2x"></i>
<a href="#" className={styles.navItem}>
CHAT
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="far fa-bell fa-2x"></i>
<a href="#" className={styles.navItem}>
NOTICES
</a>
</div>
</div>
<div className={styles.searchBarWrapper}>
<i className="fas fa-search fa-2x" style={{ color: "#0275B1" }}></i>
<input type="text" placeholder="Search" className={styles.searchBar} />
</div>
<div className={styles.profileOwner}>
<div className={styles.navAvatarWrapper}>
<img
src="https://unsplash.it/20/20"
alt="avatar"
className={styles.navAvatar}
/>
</div>
<div>
<div>
<h3 className={styles.navProfileName}>User Name</h3>
<span className={styles.navProfileNameSpan}>YOU</span>
</div>
<div>
<p className={styles.navProfileViewCount}>
367 views today<strong>+32</strong>
</p>
</div>
</div>
</div>
<div className={styles.navSubmenu}>
<i className="fas fa-ellipsis-h fa-lg"></i>
<h4 className={styles.navSubmenuTitle}>OTHER</h4>
</div>
</nav>
);
};
I am creating a horizontal navigation with an icon and text for each navigation item. I am running into an issue with items that contain two lines of text vs one.
I have tried modifying the padding and height of the div that extends higher than the others, but to no avail. How can I modify this to achieve a consistent height across all navigation items regardless of lines of text?
View the fiddle: Here
<div id="dashboard">
<a class="actions" href="#">
<div>
<i class="fas fa-users"></i> <br />Employees
</div>
</a>
<a class="actions" href="#">
<div>
<i class="fas fa-pencil-ruler"></i> <br />Check Stats
</div>
</a>
<a class="actions" href="#"">
<div>
<i class="fas fa-table"></i> <br />Generate Census
</div>
</a>
<a class="actions" href="#">
<div>
<i class="fas fa-paper-plane"></i> <br />Send Forms
</div>
</a>
<a href="#" class="actions" data-toggle="modal" data-target="#deleteClientModal">
<div>
<i class="fas fa-trash-alt"></i> <br />Delete
</div>
</a>
</div>
.actions:first-child div {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.actions:last-child div {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.actions > div {
display: block;
background-color: #fafafa;
color: #223a5c;
border: 1px solid #d6d8db;
padding: 15px 0;
margin: 0 -6px 20px 0;
width: 12.5%;
text-align: center;
display: inline-block;
}
.actions > div:hover {
background-color: #f2f2f2;
}
.actions > div i {
width: 1em;
font-size: 2em;
}
A flexbox solution might look something like this:
#dashboard {
display: flex;
}
div:first-child>.actions>div {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
div:last-child>.actions>div {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.actions>div {
background-color: #fafafa;
color: #223a5c;
border: 1px solid #d6d8db;
padding: 15px 15px;
text-align: center;
}
.actions>div:hover {
background-color: #f2f2f2;
}
.actions>div i {
width: 1em;
font-size: 2em;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div id="dashboard">
<div>
<a class="actions" href="#">
<div>
<i class="fas fa-users"></i> <br />Employees
</div>
</a>
</div>
<div>
<a class="actions" href="#">
<div>
<i class="fas fa-pencil-ruler"></i> <br />Check Stats
</div>
</a>
</div>
<div>
<a class="actions" href="#">
<div>
<i class="fas fa-table"></i> <br />Generate Census
</div>
</a>
</div>
<div>
<a class="actions" href="#">
<div>
<i class="fas fa-paper-plane"></i> <br />Send Forms
</div>
</a>
</div>
<div>
<a href="#" class="actions" data-toggle="modal" data-target="#deleteClientModal">
<div>
<i class="fas fa-trash-alt"></i> <br />Delete
</div>
</a>
</div>
</div>
Seen a similar question but no answer for my specific problem before someone points me in that direction.
My icons from font awesome are displaying a scroll bar on Windows Chrome but not mac. Overflow hidden won't work or a webkit css style. Tried overflow hidden on specific class and all div's related.
* {
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
#social-media {
padding-top: 50px;
}
#social-media-icons {
font-size: 50px;
text-align: center;
margin-top: 25px;
overflow: hidden;
}
.instagram-icon, .mixcloud-icon, .facebook-icon {
padding: 30px;
display: inline;
}
<div id="second-section">
<div id="social-media">
<h1 class="social-media-title">Social Media</h1>
<div id="social-media-icons">
<div class="instagram-icon">
<a href="https://www.instagram.com/area_808/" target="blank" class="instagram-link">
<i class="fab fa-instagram"></i>
</a>
</div>
<div class="mixcloud-icon">
<a href="https://www.mixcloud.com/Area808/" target="blank" class="mixcloud-link">
<i class="fab fa-mixcloud"></i>
</a>
</div>
<div class="facebook-icon">
<a href="" target="blank" class="facebook-link">
<i class="fab fa-facebook"></i>
</a>
</div>
</div>
</div
</div>
This is not a scrollbar BUT Because you are putting the icons inside <a> this little line is appearing and it's the default behavior for the <a> tag ( which is a { text-decoration: underline } ),
So simply just add a {text-decoration: none;}:
#social-media {
padding-top: 50px;
}
#social-media-icons {
font-size: 50px;
text-align: center;
margin-top: 25px;
overflow: hidden;
}
.instagram-icon, .mixcloud-icon, .facebook-icon {
padding: 30px;
display: inline;
}
a {
text-decoration: none;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<div id="social-media">
<h1 class="social-media-title">Social Media</h1>
<div id="social-media-icons">
<div class="instagram-icon">
<a href="#" target="blank" class="instagram-link">
<i class="fab fa-instagram"></i>
</a>
</div>
<div class="mixcloud-icon">
<a href="#" target="blank" class="mixcloud-link">
<i class="fab fa-mixcloud"></i>
</a>
</div>
<div class="facebook-icon">
<a href="#" target="blank" class="facebook-link">
<i class="fab fa-facebook"></i>
</a>
</div>
</div>
</div>
Apply text-decoration: none; for all a tags.
This works nicely.
You are using overflow-x:hidden in the * style. Instead, place it in the body.
I have a column using bootstrap where I have a font awesome icon. The height of each div can vary slightly so I need the line to adjust to the height of the div. I have come across many examples to place the line down the center of the div but all I can find are ones that cause the line to go through the icon. I would like to have the line start under the icon.
I would show you an example CSS but I really don't have anything I can show you. I don't even know where to start.
<div class="col-sm-1">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
</div>
<div class="col-sm-1">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
</div>
<div class="col-sm-1">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
</div>
<div class="col-sm-1">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
</div>
<div class="col-sm-1">
<i class="fa fa-map-marker" aria-hidden="true" style="color: #5fb760"></i>
</div>
Example:
You can also do it wrapping your i element, then use a css pseudo-element to print out your line.
<span class="vertical-line-icon" >
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
</span>
Then the CSS:
.vertical-line-icon {
display: table;
height: 100%;
}
.vertical-line-icon:after {
content: '';
display: table;
margin: 0 auto;
width: 4px;
height: 100%;
background-color: #555555;
margin-top:5px;
}
See Fiddle: https://jsfiddle.net/rn9g21fj/
may be try something line this? dividing eaahc section with bootstrap's row?
<div class="row">
<div class="col-sm-1" style="text-align: center !important;">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"> </i><br>
<img src="straight-line.jpg" />
</div>
</div>
<div class="row">
<div class="col-sm-1" style="text-align: center !important;">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"> </i><br>
<img src="straight-line.jpg" />
</div>
</div>
You can do this using css's pseudo-element ::after. Just make a block after the i tag and align it in center using position:absolute;
i {position: relative;}
i::before {font-size: 30px;}
i::after {content: ""; display: block; position: absolute; left: 50%; top: 120%; transform: translateX(-50%); width: 6px; background: #556e79; height: 180px;}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
You would need to use CSS to make line vertical and to adjust the icons. I have used class="row" to make lines separated
I gave it a try and created a codepen aswell CodePen Vertical Line
vr {
width:10px;
background-color:#000;
position:absolute;
top:25px;
bottom:0;
left:15px;
height:100px;
}
<div class="row">
<div class="col-sm-1">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i><vr />
</div>
<div class="col-sm-1">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
<vr />
</div>
<div class="col-sm-1">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
<vr />
</div>
<div class="col-sm-1">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
<vr />
</div>
<div class="col-sm-1">
<i class="fa fa-map-marker" aria-hidden="true" style="color: #5fb760"></i>
<vr />
</div>
</div>
</div>
Hope this helps
I am trying to achieve a simple css border effect with proper padding. Trying to make it responsive without using bootstrap.
I just have one font and border around it and arrows between two div but I am not getting it
code:
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
.work {
float: left;
border: 4px solid black;
padding: 10px 10px 10px 10px;
}
.work:before {
content: '\f178';
margin-top: 10px;
position: absolute;
right: -11px;
top: 44%;
}
<div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST1</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST2</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST3</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST4</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST5</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST6</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST7</h4>
</div>
</div>
link to codepen: https://codepen.io/rahulv/pen/BRwjEd
what I am trying to acheive is I dont get padding between two boxes also I want arrow between them .. its like test1 -> test2 -> test3..
You are missing the border style property which is required. Also you need position: relative; on .work to make the absolutely positioned psuedo element work, and the font-awesome font-family. Text-align: center for icons...
Check out full example:
.work{
position: relative;
float:left;
border: 4px solid black;
padding: 10px 10px 10px 10px;
text-align: center;
}
.work:not(:last-of-type) {
margin-right: 20px;
}
.work:not(:last-of-type):before {
content: '\f178';
font-family: "FontAwesome";
margin-top: 10px;
position: absolute;
right: -22px;
top: 41%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST1</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST2</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST3</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST4</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST5</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST6</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST7</h4>
</div>
</div>
You need to do following changes
.work:before {
content: '\f178';
margin-top: 0;
position: absolute;
right: -23px;
top: 50%;
transform: translateY(-50%);
font-family: 'FontAwesome';
}
and
.work:not(:last-of-type) {
margin-right: 20px;
}
Here is working final demo
http://codepen.io/sajiddesigner/pen/EmwKvj
To put the font awesome arrow outside of the right of the parent, use right: 0; to move it to the right side, then push it outside of the parent with translateX().
To have the puzzle piece right above the text, remove the margin (or just margin-top) from the text.
To have space between the boxes, you need a right margin.
.work {
float: left;
border: 4px solid black;
padding: 10px;
margin-right: 25px;
position: relative;
}
h4 {
margin: 0;
}
.work:before {
content: '\f178';
position: absolute;
transform: translateX(150%);
top: 50%; right: 0;
font-family: 'FontAwesome';
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST1</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST2</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST3</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST4</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST5</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST6</h4>
</div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST7</h4>
</div>
</div>
You need to specify the type of border
try using this:
border: 4px black solid;