For my portfolio subpage I would like to to make the header transparent, while having chosen the left header layout, or remove it completely. If I do so, the space where the header was placed before is not used and stays blank. Even when operating a nectar slider with full screen and width settings.
Note: I am aware of the transparent setting, as I used it in the top header layout element. Works fine then.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (min-width: 1001px){
body[data-header-format="left-header"].single-portfolio #ajax-content-wrap {
margin-left: 0px !important;
}
}
Thank you Tahir, for the quick response. If have added the custom css but the problem does not seem fixed. At the moment I still have the side on the left blank..
I have double checked the setting within the column and row elements too. How can we fix this?
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (min-width: 1001px) {
body[data-header-format="left-header"].page-id-1172 #ajax-content-wrap {
margin-left: 0px !important;
}
}
For my portfolio subpage I would like to to make the header transparent, while having chosen the left header layout, or remove it completely. If I do so, the space where the header was placed before is not used and stays blank. Even when operating a nectar slider with full screen and width settings.
Note: I am aware of the transparent setting, as I used it in the top header layout element. Works fine then.
Any chance to fix this?
Hey Again,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (min-width: 1001px){ body[data-header-format="left-header"].single-portfolio #ajax-content-wrap { margin-left: 0px !important; } }Thanks
ThemeNectar Support Team
Thank you Tahir, for the quick response. If have added the custom css but the problem does not seem fixed. At the moment I still have the side on the left blank..
I have double checked the setting within the column and row elements too. How can we fix this?
Regards
Hey,
Please provide the page url so that i can write up the custom css for whats possible.
Thanks
ThemeNectar Support Team
I am getting a 404 on the page ?. Did you try using the No Header Page template for the Portfolio Page in here :
Best
ThemeNectar Support Team
Hey Again,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (min-width: 1001px) { body[data-header-format="left-header"].page-id-1172 #ajax-content-wrap { margin-left: 0px !important; } }Thanks
ThemeNectar Support Team
@media only screen and (min-width: 1000px) {
[data-header-format="left-header"] .full-width-content.blog-fullwidth-wrap, [data-header-format="left-header"] .wpb_row.full-width-content, [data-header-format="left-header"] .full-width-content.nectar-shop-outer, [data-header-format="left-header"] .page-submenu > .full-width-section, [data-header-format="left-header"] .page-submenu .full-width-content, [data-header-format="left-header"] .full-width-section .row-bg-wrap, [data-header-format="left-header"] .full-width-section .nectar-parallax-scene, [data-header-format="left-header"] .full-width-section > .nectar-shape-divider-wrap, [data-header-format="left-header"] .full-width-section > .video-color-overlay, [data-header-format="left-header"][data-aie="zoom-out"] .first-section .row-bg-wrap, [data-header-format="left-header"][data-aie="long-zoom-out"] .first-section .row-bg-wrap, [data-header-format="left-header"][data-aie="zoom-out"] .top-level.full-width-section .row-bg-wrap, [data-header-format="left-header"][data-aie="long-zoom-out"] .top-level.full-width-section .row-bg-wrap, [data-header-format="left-header"] .full-width-section.parallax_section .row-bg-wrap, [data-header-format="left-header"] .nectar-slider-wrap[data-full-width="true"], body[data-header-format="left-header"] .wpb_row.full-width-section .templatera_shortcode > .wpb_row.full-width-section > .row-bg-wrap {
margin-left: calc(-50vw + 100px);
width: calc(100vw - 200px);
left: 50%;
}
}
@media only screen and (min-width: 1001px){
body[data-header-format="left-header"].single-portfolio #ajax-content-wrap {
margin-left: 0px !important;
}
}
@media only screen and (min-width: 1001px) {
body[data-header-format="left-header"].page-id-1172 #ajax-content-wrap {
margin-left: 0px !important;
}
}
this is the current copy paste.
Now I have the the empty space partially on both sides. Have a look in my attached photo.
warm regards,
Hey Again,
Gonna confirm this with the developer i believe its not possible to keep it full width when using the Left Header Option.
Best
ThemeNectar Support Team
Hey Clemens, once the left margin is removed, you'll also need the following snippet to get full width items to work:
body[data-header-format="left-header"] .full-width-section .row-bg-wrap { margin-left: -50vw; left: 50%; width: 100vw; } .nectar-slider-wrap[data-fullscreen="true"] .swiper-container { width: 100vw!important; }OMG, yeeeeeees! Works fine now!
Thank you guys :) <3
p.s. out of curiosity: why was this such a difficult case to resolve? love to learn a bit about the behind the scenes :)
warm regards!