-
Posts
-
Hi,
I have a fixed logo and header on desktop that I like very much, but I would like the logo on mobile to move up by scroll and not stay fixed. On mobile i still want the small fixed header with hamburger icon, but that the logo is relative. I have tried with css but have not succeeded.
The logo is overlapping the content both on desktop and mobil which is great, so this need to be the same.
Kindly regards, MathildeHey Mathilde,
Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)
Best regards,
JordanYes of course, sorry, here it is (private content). And wish also that the logo is a bit smaller on mobile.
Hi,
The site is on maintenance mode. Did you enable the sticky header? Or did you add css modifications? On mobile view, the header should not stick to the top because the position is set to relative.
Best regards,
IsmaelHi Ismael, The header is enabled to sticky on desktop, but would very much like it to be relative on mobile. I tried to set it to relative on mobile.
Best regards, Mathilde
Hi,
The logo is relative already but the header is positioned fixed so logo appears to be fixed since it is inside the header. To make the header relative Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width: 767px){ .responsive #top #wrap_all #header { position: relative!important; }}Best regards,
VinayHi Vinay,
Thanks, now it’s all relative, but it’s only the logo that I wish to be relative, not the header, and the hamburger (which is fixed). And also that the logo still overlaps the content like on desktop view. Is it possible to have the fixed white header still? And also get the content more up? And how to get logo centered fully both in mobile and tablet also while moving the screen horizontal?
Thanks a lot,
Kindly regards, MathildeHi,
As mentioned the logo is already relative. Are you trying to show the logo within the header area? the height of the logo is more than the header so it is bound to extrude. Reduce the logo height to around 55px. If this is not what you want please post us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)
@media only screen and (max-width: 767px) { .responsive .logo a, .responsive .logo img { height: 50px !important; max-height: 50px !important; top: -20px!important; }}Best regards,
VinayHi, thanks for quick reply.
Here’s the css for the responsive logo I have now:
@media only screen and (max-width: 767px) {
.responsive .logo a, .responsive .logo img {
display: inline-block;
vertical-align: middle;
margin: 0 auto;
max-width: 100%;
height: 80px !important;
max-height: 80px !important;
width: auto;
top: -7px;
}
.responsive .logo {
position: relative;
display: block;
width: 100%;
}
.logo img {
left: 40% !important;
transform: translateX(-40%) !important;
}
}It looks the way I want, but on scroll I want only the logo to be relative and scroll away, but that the header is fixed still.
The logo is centered now, but not when I move my mobile to horizontal view it’s not.This is how it look now which I like: https://www.dropbox.com/s/c74ez1zg67okev5/Bilde%2011.07.2016%2C%2010.59.56.png?dl=0
This is horizontal view that I don’t like: https://www.dropbox.com/s/azh3ovq1jwlnz45/Bilde%2011.07.2016%2C%2011.00.10.png?dl=0
with too much space in header and not centered logoThis is view on scroll where I like the hamburger and white fixed header, but not that the logo is fixed and showing on scroll.
https://www.dropbox.com/s/c8boi9gyhfodzxg/Bilde%2011.07.2016%2C%2011.01.03.png?dl=0Kindly regards, Mathilde
Did you manage to find a solution for this? I like the appoach of keeping the hamburger fixed and the logo relative and would like to apply the same to my site.
Cheers,
LouiseHi, I’ve got the logo centered now also on horizontal view. Logo still fixed, but maybe it’s best to have it like that. It would be nice to know how to have it relative though for other future sites, maybe we can ask Kriesi for that option, to choose this in the in header styling.
Hi,
feel free to make a feature request for Kriesi here: https://kriesi.at/support/enfold-feature-requests/
Best regards,
Andy
- You must be logged in to reply to this topic.