We've created a simple splash page, with no need for a menu at this time. I was initially using the Header Nav. option of "Centered Menu Alt", but it was creating some awkward padding (both top and bottom) when viewing on desktop ad mobile. I realized the best result I get for the Header Nav. is when using "Centered Logo Between Menu". On desktop, it looks perfect, but is there any way I can have the logo position in the center for mobile devices? I looked around the Salient discussion board to see if there was some custom CSS to help me out, but none seem to get the Header Nav. logo to center itself for mobile.
Hi!
We've created a simple splash page, with no need for a menu at this time. I was initially using the Header Nav. option of "Centered Menu Alt", but it was creating some awkward padding (both top and bottom) when viewing on desktop ad mobile.
I realized the best result I get for the Header Nav. is when using "Centered Logo Between Menu". On desktop, it looks perfect, but is there any way I can have the logo position in the center for mobile devices?
I looked around the Salient discussion board to see if there was some custom CSS to help me out, but none seem to get the Header Nav. logo to center itself for mobile.
Any help would be GREATLY appreciated! Thank you!
Hey Again,
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
/* center logo in MobileTabletas well */ @media only screen and (max-width: 1000px) and (min-width: 1px) { #header-outer[data-format="centered-logo-between-menu"] .span_3 #logo:not(.no-image) img { -ms-transform: translateX(-50%) !important; transform: translateX(-50%) !important; -webkit-transform: translateX(-50%) !important; } #header-outer[data-format="centered-logo-between-menu"] .span_3 { position: absolute!important; left: 50%!important; } }Thanks
ThemeNectar Support Team
Thank you so much, worked perfectly!