Comments 16Soluforyou started the conversationJuly 6, 2023 at 1:09pmHi there, how can I influence the height of the nav bar at my site. See www.soluforyou.comNote I made a TOP bar as as well, and use CSS to push the nav bar down a bit. See the screenshot, the red area needs to be bigger/the same as above.Here my CSS as well:/* 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%; left: 0px !important; top: 0; z-index: 9999; opacity: 0; /* Added for fade-in effect */ animation: fadeIn 2s forwards; /* Added for fade-in effect */} /* SECOND BAR */.wpml-ls-item ul.sub-menu.tracked-pos { border-radius: 10px !important; border-top: 0px !important;} /* Fade-in effect animation */@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }} @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;} /* alle BUTTONs font */div.nectar-cta.button-sweet .text { 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;} /* FAQ Header */.FAQ-juana h3 { font-family: 'juana'!important; font-weight: normal !important;} /* SHOP subheaders filter styling */#sidebar .wc-blocks-filter-wrapper h3.wp-block-heading { font-size: 14px;} /* SHOP filter by price fileld circles */div.wc-block-price-filter__range-input-wrapper.wc-block-components-price-slider__range-input-wrapper input[type="range"]::-webkit-slider-thumb { background: black;}div.wc-block-price-filter__range-input-wrapper.wc-block-components-price-slider__range-input-wrapper input[type="range"]::-moz-range-thumb { background: black;} /* SHOP Price filter more elegant */.wc-block-components-price-slider__range-input-wrapper:before{ background:transparent !important;}.wc-block-components-price-slider__range-input-progress{ height:2px !important; top:-50% !important;}div.wc-block-price-filter__range-input-wrapper.wc-block-components-price-slider__range-input-wrapper input[type="range"]::-webkit-slider-thumb { height:4px; width:4px;} /* SHOP Checkboxes more thin */.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]{ border:1px solid black !important;} /* HOME - SHOP Prices size */.home .woocommerce ul.products li.product.material .price, .home .woocommerce ul.products li.product .price, .home .woocommerce ul.products li.product.material .price .woocommerce-Price-amount { font-size: 17px !important;} /* SHOP Product Title on product page */.single-product div.product h1.product_title { font-size: 32px !important;} /* SHOP Product Price */.single-product.woocommerce div.product .summary p.price { font-size: 15px;} /* SHOP No bullshit below pictures */div#tab-additional_information { display: none !important; } /* SHOP 'Related products' */ #ajax-content-wrap .related.products > h2,#ajax-content-wrap .upsells.products > h2,#ajax-content-wrap #tab-reviews #reviews #comments h2,.woocommerce .woocommerce-tabs #tab-additional_information h2,#ajax-content-wrap #reviews #reply-title,.woocommerce-tabs #reviews .nectar-average-count,#review_form_wrapper.modal .comment-reply-title,.woocommerce-tabs[data-tab-style="fullwidth_stacked"] p.woocommerce-noreviews { font-family: 'juana' !important;}Attached files: Screenshot 2023-07-06 at 15.06.47.jpg 2,958Andrew repliedJuly 6, 2023 at 1:29pmHello again,Thank you for getting back to us.Try adding this CSS and let us know how that goes. @media only screen and (min-width: 1px) and (max-width: 999px) { body #header-outer { padding: 12px 0 23px; } } Best regards,1 Like 16Soluforyou repliedJuly 6, 2023 at 3:28pmPerfect, thanks Andrew!1 Like Sign in to reply ...
Hi there, how can I influence the height of the nav bar at my site. See www.soluforyou.com
Note I made a TOP bar as as well, and use CSS to push the nav bar down a bit.
See the screenshot, the red area needs to be bigger/the same as above.
Here my CSS as well:
/* 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%;
left: 0px !important;
top: 0;
z-index: 9999;
opacity: 0; /* Added for fade-in effect */
animation: fadeIn 2s forwards; /* Added for fade-in effect */
}
/* SECOND BAR */
.wpml-ls-item ul.sub-menu.tracked-pos {
border-radius: 10px !important;
border-top: 0px !important;
}
/* Fade-in effect animation */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@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;
}
/* alle BUTTONs font */
div.nectar-cta.button-sweet .text {
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;
}
/* FAQ Header */
.FAQ-juana h3 {
font-family: 'juana'!important;
font-weight: normal !important;
}
/* SHOP subheaders filter styling */
#sidebar .wc-blocks-filter-wrapper h3.wp-block-heading {
font-size: 14px;
}
/* SHOP filter by price fileld circles */
div.wc-block-price-filter__range-input-wrapper.wc-block-components-price-slider__range-input-wrapper input[type="range"]::-webkit-slider-thumb {
background: black;
}
div.wc-block-price-filter__range-input-wrapper.wc-block-components-price-slider__range-input-wrapper input[type="range"]::-moz-range-thumb {
background: black;
}
/* SHOP Price filter more elegant */
.wc-block-components-price-slider__range-input-wrapper:before{
background:transparent !important;
}
.wc-block-components-price-slider__range-input-progress{
height:2px !important;
top:-50% !important;
}
div.wc-block-price-filter__range-input-wrapper.wc-block-components-price-slider__range-input-wrapper input[type="range"]::-webkit-slider-thumb {
height:4px;
width:4px;
}
/* SHOP Checkboxes more thin */
.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]{
border:1px solid black !important;
}
/* HOME - SHOP Prices size */
.home .woocommerce ul.products li.product.material .price, .home .woocommerce ul.products li.product .price,
.home .woocommerce ul.products li.product.material .price .woocommerce-Price-amount {
font-size: 17px !important;
}
/* SHOP Product Title on product page */
.single-product div.product h1.product_title {
font-size: 32px !important;
}
/* SHOP Product Price */
.single-product.woocommerce div.product .summary p.price {
font-size: 15px;
}
/* SHOP No bullshit below pictures */
div#tab-additional_information {
display: none !important;
}
/* SHOP 'Related products' */
#ajax-content-wrap .related.products > h2,#ajax-content-wrap .upsells.products > h2,#ajax-content-wrap #tab-reviews #reviews #comments h2,.woocommerce .woocommerce-tabs #tab-additional_information h2,#ajax-content-wrap #reviews #reply-title,.woocommerce-tabs #reviews .nectar-average-count,#review_form_wrapper.modal .comment-reply-title,.woocommerce-tabs[data-tab-style="fullwidth_stacked"] p.woocommerce-noreviews {
font-family: 'juana' !important;
}
Attached files: Screenshot 2023-07-06 at 15.06.47.jpg
Hello again,
Thank you for getting back to us.
Try adding this CSS and let us know how that goes.
Best regards,
Perfect, thanks Andrew!