Mobile menu- pique theme

• 

  revstrength · Member · Sep 15, 2016 at 4:16 am

  • Copy link
  • Add topic to favorites

  Hi! So i’m using the pique theme. The standard size of the logo doesn’t do my logo any justice so i entered a css code to make it bigger, and on a computer my website looks amazing! But when i view it from a phone…. The menu on my home screen is messed up. Can anyone give me any advice how to fix this? Thank you!

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Sep 26, 2016 at 11:13 pm

  • Copy link

  Hi there, first let’s make a bit of a change to your logo resize CSS rule and replace it with the following.

  .site-branding .site-logo-link img {
  	max-height:150px;
  	height: 100%;
  }

  Although I don’t see any issues on your site, the above change will make sure there aren’t any issues on smaller screens.

  Then add the following to correct the overlap issue, which uses a Media Query to make correct the alignment on 768px and narrower screens.

  @media screen and (max-width: 768px) {
  	#pique-hero .pique-panel-content {
  		padding-top: 280px !important;
  	}
  }

  Give the above a try and let me know how that looks to you.