How to overlap the logo over the bottom of the header on mobile - Support

Viewing 16 posts - 1 through 16 (of 16 total)

Author

Posts
April 16, 2018 at 2:12 pm #942577
StormWebDesign
Participant
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, 7 months ago by StormWebDesign.
April 16, 2018 at 8:34 pm #942748
Guenni007
Participant
well 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 #942949

Rikard
Keymaster

Hi,

Thanks for helping out @gunni007, did you try that out and did you have any luck with it @stormwebdesign?

Best regards,
Rikard

April 19, 2018 at 2:11 pm #944097

StormWebDesign
Participant

Hi @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,
Johnny

April 19, 2018 at 10:00 pm #944332

Guenni007
Participant

Sorry – 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 #944456

Rikard
Keymaster

Hi 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,
Rikard

April 20, 2018 at 10:38 am #944525

StormWebDesign
Participant

Hi,
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.png

IMG_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,
Johnny

April 20, 2018 at 11:01 am #944529

Guenni007
Participant

thats 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 tools

April 20, 2018 at 11:11 am #944530

StormWebDesign
Participant

Dev Website http://79.170.44.86/ref-thewestparkhotel.com/

Live Website with overlap http://thewestparkhotel.com/

April 20, 2018 at 2:06 pm #944586
Guenni007
Participant
on 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 #944587

StormWebDesign
Participant

Hi. I’m viewing it on an iPhone 7.

April 20, 2018 at 2:20 pm #944589

Guenni007
Participant

But 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 #944590
Guenni007
Participant
sorry 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

StormWebDesign
Participant

@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 #944593
Guenni007
Participant
Why 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, 7 months ago by Guenni007.
April 21, 2018 at 7:23 am #944817

Rikard
Keymaster

Hi,

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
Author

Posts

Viewing 16 posts - 1 through 16 (of 16 total)

You must be logged in to reply to this topic.