I have searched the archives up and down to find a bit of code to help with an issue we are having on reelphotoapp.com
We are striving to remove EVERYTHING (except the logo) out of the header at Desktop, Tablet, and Mobile. We currently use:
/* Remove Search */
#mobile-menu #mobile-search, header#top nav ul #search-btn {
display: none!important;
}
To remove the search, and this works flawlessly.
The error we now have is the thin line under the header is butted up against the logo. Adding padding to div class="row" corrects the visual on desktop but also adds unnecessary padding to tablet and mobile.
Once we have the line error fixed, we still need to take out the menu icon (hamburger icon) from the tablet and mobile view.
Now however on Desktop scroll, I still have 0 padding beneath the logo in the header (see in 1st attachment). If I add padding to the header, then it also add its to mobile/tablet, which I do not want because currently tablet and mobile headers look correct on scroll (see in 2nd attachment).
This would be a great help for your FAQ... seems pretty obvious that if you are trying to remove everything except the logo from the header that you will need all of the above code. Thanks!
I am attempting something similar on mobile: I want to make the header on mobile transparent. It is appearing with a gray bar at the top, but when I start scrolling it appears correctly. Is there any way to remove the space for the header?
ALSO, is there a CSS script that can remove the scroll effect that I have on a single page? On the home page I was hoping to remove the shrinking logo and white overlay effect.
I have searched the archives up and down to find a bit of code to help with an issue we are having on reelphotoapp.com
We are striving to remove EVERYTHING (except the logo) out of the header at Desktop, Tablet, and Mobile. We currently use:
/* Remove Search */
#mobile-menu #mobile-search, header#top nav ul #search-btn {
display: none!important;
}
To remove the search, and this works flawlessly.
The error we now have is the thin line under the header is butted up against the logo. Adding padding to div class="row" corrects the visual on desktop but also adds unnecessary padding to tablet and mobile.
Once we have the line error fixed, we still need to take out the menu icon (hamburger icon) from the tablet and mobile view.
Please, your help is greatly appreciated!
Hey!
body #header-outer[data-transparent-header="true"].transparent { border-bottom: none !important; } body header#top #toggle-nav { display: none !important; }
ThemeNectar Support Team
That worked great to remove the menu icon.
Now however on Desktop scroll, I still have 0 padding beneath the logo in the header (see in 1st attachment). If I add padding to the header, then it also add its to mobile/tablet, which I do not want because currently tablet and mobile headers look correct on scroll (see in 2nd attachment).
Hey!
@media only screen and (min-width: 1000px) { body header#top #logo { position: relative; top: -8px; } }
ThemeNectar Support Team
Awesome! Thanks for the input!
This would be a great help for your FAQ... seems pretty obvious that if you are trying to remove everything except the logo from the header that you will need all of the above code. Thanks!
I am attempting something similar on mobile: I want to make the header on mobile transparent. It is appearing with a gray bar at the top, but when I start scrolling it appears correctly. Is there any way to remove the space for the header?
ALSO, is there a CSS script that can remove the scroll effect that I have on a single page? On the home page I was hoping to remove the shrinking logo and white overlay effect.
all for http://steven-watts.com
Hey Christine,
The Easiest way is to use the Permanent Transparent Header Option in Salient Theme Options Panel .
Thanks
ThemeNectar Support Team
I have that turned on, but it does not eliminate the scroll effect on steven-watts.com.
Hey Again,
You still seem to have the Resize on Scroll Option turned on . Please turn it off :
ThemeNectar Support Team