-
AuthorPosts
-
April 16, 2018 at 2:12 pm #942577
Hi,
I’ve been able to overlap the logo over the bottom of the header on desktop but it’s not overlapping on mobile. I’ve provided a link to the development website in the Private section.
Are you able to provide some CSS so the logo overlaps on mobile too, please. Thanks in advance,
Johnny- This topic was modified 6 years, 8 months ago by StormWebDesign.
April 16, 2018 at 8:34 pm #942748well as a participant as you are i do not see the private content – but it comes from the media query rule :
@media only screen and (max-width: 767px) { .responsive #top .logo { display: table; } }
try to set this in quick css ( guess an !important is necessary )
@media only screen and (max-width: 767px) { .responsive #top .logo { display: block; } }
you can see here a testpage: https://webers-testseite.de/cynthia/unite4-2/
April 17, 2018 at 6:45 am #942949Hi,
Thanks for helping out @gunni007, did you try that out and did you have any luck with it @stormwebdesign?
Best regards,
RikardApril 19, 2018 at 2:11 pm #944097Hi @gunni007,
Thanks for taking the time to post your thoughts. Much appreciated! However it doesn’t seem to fix the issue. On mobile, the logo is still located in the header. I’ve added some links in the Private section.
Thanks again,
JohnnyApril 19, 2018 at 10:00 pm #944332Sorry – no private links can be seen by me – i’m still a Participant as you
my avatar/nick gives you contact info – so feel free to email me.April 20, 2018 at 6:55 am #944456Hi Johnny,
Thanks for the feedback, though I’m seeing the logo overlapping on mobile as well using Chrome. Could you post a screenshot of what you are seeing on your end and how to reproduce it please?
Best regards,
RikardApril 20, 2018 at 10:38 am #944525Hi,
Here are the Screen shots. I would like to have the logo overlap the main header area.
IMG_1564 – Development Website
http://79.170.44.86/ref-thewestparkhotel.com/wp-content/uploads/2018/04/IMG_1564.pngIMG_1565 – How I want it to look
http://79.170.44.86/ref-thewestparkhotel.com/wp-content/uploads/2018/04/IMG_1565.png
Thanks again,
JohnnyApril 20, 2018 at 11:01 am #944529thats nice – but without a live link it does not work – to decide from a screenshot it is not possible.
i had to see the dom structure and to be able to simulate changings on developer toolsApril 20, 2018 at 11:11 am #944530Dev Website http://79.170.44.86/ref-thewestparkhotel.com/
Live Website with overlap http://thewestparkhotel.com/
April 20, 2018 at 2:06 pm #944586on my browser all is nice – with what kind of device you are looking to the dev. site ?
ok on firefox with developer test devices – i see the problem:
can you please replace your rule with:
/* MOBILE LOGO */ @media only screen and (max-width: 767px) { .responsive #top .logo { display: block !important; max-height: 120px !important; height: 120px !important; } }
afterwards we see how to optimize the sizes
April 20, 2018 at 2:14 pm #944587Hi. I’m viewing it on an iPhone 7.
April 20, 2018 at 2:20 pm #944589But your very long menu should switch to hamburger a bit earlier. It overlaps the logo on f.e. ipad landscape
April 20, 2018 at 2:26 pm #944590sorry my fault :
/* MOBILE LOGO */ @media only screen and (max-width: 767px) { .responsive #top .logo { display: block !important; } .responsive #top .logo img { max-height: 120px !important; height: 120px !important; } }
April 20, 2018 at 2:31 pm #944591@gunni007, you are a legend. Thanks so much. The menu now overlaps perfectly on mobile. Your time and support is much appreciated!
Thanks again!!!April 20, 2018 at 2:35 pm #944593Why did you change floating behavior of logo?
i think this will look better – aquidistant from the border with hamburger sign:
@media only screen and (max-width: 767px) { .responsive #top .logo { display: block !important; float: !important; } .responsive #top .logo img { max-height: 120px !important; height: 120px !important; } }
And: PPS: the slider is still visible on very small screens when the fallback image is shown
- This reply was modified 6 years, 8 months ago by Guenni007.
April 21, 2018 at 7:23 am #944817Hi,
Thanks @guenni007 for helping out :-)
Please let us know if you should need any further help on the topic or if we can close it @stormwebdesign.
Best regards,
Rikard -
AuthorPosts
- You must be logged in to reply to this topic.