Resizing browswer/ mobile page

mdental · March 2015

Hi team,

When the browser is resized, the logo on our menu moves to the left and then disappears altogether. If I view my page on a mobile phone, the logo is also gone. Is it possible to make it so that the logo is always present in the middle on a blue background no matter the size of the page?

www.mascotdentalclinic.com.au

Thanks!

Albert · March 2015

Hi,

Unfortunately we can't see your page. Please check it

The page you are looking for is temporarily unavailable.

Please try again later.

Thanks!

mdental · March 2015

Hi there,

please have a look again now, thanks!

mdental · March 2015

Hi! there are actually a number of issues we would like to resolve:

1) the logo issue as above - why does it disappear when browser width is around 400 px ie viewing on mobile phone.

2) In full size 1920px, the header is fine however we would like the menu text to move down vertically so it is around level middle of the logo

3) As i resize the broser horizontally to about 1000 px, The menu disappears into the menu icon and the logo moves to the left side. how do we retain it to centre and a blue background (like background of sticky)? Also a gap now exists at the top of the browser - how do we get rid of that?

4) If i resize it further to around phone resolution, i now have the desired blue background however the Logo has disappeared. Further more there is now a gap between the header and the slider? I don't understand why the transition is this unsmooth.

Thank you for your help!

Albert · March 2015

Hi,

At first please remove below line:

.header-split #Header .top_bar_left .logo { left: 42%; width: 16%; }

And then paste below code:

@media only screen and (min-width: 1240px) {
	.header-split #Header .top_bar_left .logo { left: 42%; width: 16%; }	
	#Top_bar .menu > li > a span:not(.description) { padding: 60px 20px !important; }	
}
@media only screen and (max-width: 767px) {
	body:not(.template-slider):not(.header-simple) #Header { min-height: 0px; }
}

Thanks!

mdental · March 2015

Hi,

Thanks for that! However, now when I scroll down on a normal browser, the menu items are actually below the logo (not within the blue background). How can I change that?

Thanks!

Albert · March 2015

This happen because you activated sticky menu. So please replace below css:

#Top_bar .menu > li > a span:not(.description)

with:

#Top_bar:not(.is-sticky) .menu > li > a span:not(.description)

from above code and all will be fine.

Resizing browswer/ mobile page

Comments