Resizing browswer/ mobile page

Comments

• 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!
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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!

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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.
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next