Hi there, I've added a top bar with a plugin since Salient unexpectedly does not offer this. You can view the site in development: soluforyou.com
The plugin is called 'Easy Notifaction Bar'. With some CSS I've now a working bar which is okisch. However, the bottom line is set to 100% width, but something of Salient is making it not connect to the left side of the browser.
Can you help me out with this? maybe you can see what I am doing wrong here.
This is my CSS:
/* TOP BAR */ body .easy-notification-bar-container { box-sizing: border-box; /* Add this line */ background-color: #fcfbfa; border-bottom: 1px solid #D6D6D6; padding: 6px 0; position: fixed; width: 100%; top: 0; z-index: 9999; }
@media (max-width: 768px) { .easy-notification-bar-container { display: none; /* This hides the top bar on mobile devices */ } }
/* NAV PUSHED DOWN FOR TOP BAR */ header { padding-top: 38px !important; /* For Desktop */ }
@media screen and (max-width: 768px) { header { padding-top: 12px !important; /* For Mobile */ } }
/* NAV NO SHADOW */ #header-outer { box-shadow: none !important; }
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
body .easy-notification-bar-container {
left: 0px !important;
}
Hi there, I've added a top bar with a plugin since Salient unexpectedly does not offer this. You can view the site in development: soluforyou.com
The plugin is called 'Easy Notifaction Bar'. With some CSS I've now a working bar which is okisch. However, the bottom line is set to 100% width, but something of Salient is making it not connect to the left side of the browser.
Can you help me out with this? maybe you can see what I am doing wrong here.
This is my CSS:
/* TOP BAR */
body .easy-notification-bar-container {
box-sizing: border-box; /* Add this line */
background-color: #fcfbfa;
border-bottom: 1px solid #D6D6D6;
padding: 6px 0;
position: fixed;
width: 100%;
top: 0;
z-index: 9999;
}
@media (max-width: 768px) {
.easy-notification-bar-container {
display: none; /* This hides the top bar on mobile devices */
}
}
/* NAV PUSHED DOWN FOR TOP BAR */
header {
padding-top: 38px !important; /* For Desktop */
}
@media screen and (max-width: 768px) {
header {
padding-top: 12px !important; /* For Mobile */
}
}
/* NAV NO SHADOW */
#header-outer {
box-shadow: none !important;
}
/* HOME intro intro header */
.intro {
text-transform: uppercase !important;
font-family: "Sweet-Sans-Pro", sans-serif !important;
font-weight: 700 !important;
font-size: 14px !important;
}
/* BUTTON font */
.button-sweet {
text-transform: uppercase !important;
font-family: "Sweet-Sans-Pro", sans-serif !important;
}
/* HOME H1 closer to intro header - Desktop */
@media screen and (min-width: 992px) {
h1 {
margin-top: -11px !important;
}
}
/* HOME H1 closer to intro header - Mobile */
@media screen and (max-width: 991px) {
h1 {
margin-top: -5px !important;
}
}
/* HOME Header pop-up Woocommerce */
.single-product div.product h1.product_title {
font-family: 'juana' !important;
font-size: 22px !important;
}
.nectar-quick-view-box .product_title {
font-family: 'juana' !important;
font-size: 40px !important;
}
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
body .easy-notification-bar-container { left: 0px !important; }Thanks
ThemeNectar Support Team
great, that helped!!