Hi im wondering how i would use the beautiful new Salient Mag layout but have my logo break out the box. The logo is circular and id like it to over hang the header so that the bar is underneath. The logo must stay responsive on mobile still. See my mockup screenshot as example.
The second question i have is. Is there a way to make the divider line a dashed line. ?
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):
Also when i scroll down the page - the header area goes away leaving the bottom part the logo visable. Is there a way to make the header stay at the top and have the content scroll underneath.
Hi im wondering how i would use the beautiful new Salient Mag layout but have my logo break out the box. The logo is circular and id like it to over hang the header so that the bar is underneath. The logo must stay responsive on mobile still. See my mockup screenshot as example.
The second question i have is. Is there a way to make the divider line a dashed line. ?
Attached files: desktop mockup.png
mobile mockup.png
Hey sramzee ,
Please provide the page URL so we can write up CSS for what's possible.
Thanks.
ThemeNectar Support Team
Hi there,
Thanks for writing to us.
Please share your website URL so that we can check your logo position and see how best you can adjust it.
Looking forward to hearing from you.
here is the URL to my staging site. https://www.weraisedigital.co.uk/creationstation/
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):
#header-outer[data-transparent-header=true] #top #logo img { height: 170px; position: relative; min-height: 90px; margin-bottom: -80px; }Thanks
ThemeNectar Support Team
Sadly that code is not quite working. on desktop the logo hangs over the bottom only. On mobile the header shrinks to a thin line.
Also when i scroll down the page - the header area goes away leaving the bottom part the logo visable. Is there a way to make the header stay at the top and have the content scroll underneath.
Hey Again,
Use this revised code only. You can further adjust the values as per your needs.
#header-outer[data-transparent-header=true] #top #logo img { height: 170px !important; position: relative; min-height: 90px !important; margin-bottom: -40px; margin-top: -40px !important; } @media only screen and (min-width: 1px) and (max-width: 999px) { #header-outer[data-transparent-header=true] #top #logo img { height: 90px !important; position: relative; min-height: 0px !important; margin-bottom: -20px; margin-top: -20px !important; } } #header-outer[data-transparent-header=true].invisible #top #logo img { margin-bottom: 0px !important; }Thanks
ThemeNectar Support Team
That is amazing you are a genius!! Thankyou so much
just last few bits. So sorry.
How do i make the header sticky so its always there on top and content scrolls under?
is there a way to make the divider line element a dashed line?
Thank you so much once again for your speedy response and logo fix! :)
Hello again,
Thank you for getting back to us.
The header for the theme should be sticky by default. Try disabling this option to fix the header.
As for the dashed line, the theme does not have an option for this.
We appreciate your understanding.
Kind regards,
Thanks guys!