Suits Theme – Header Not Responsive… yet

• 

  bobbyhearn · Member · Feb 20, 2015 at 4:31 pm

  • Copy link

  I was hoping to launch this today. Gahhh. Silly menu

• 

  bobbyhearn · Member · Feb 20, 2015 at 4:34 pm

  • Copy link

  I’d like to be able to scroll through that menu. Sorry for so many replies!

• 

  designsimply · Member · Feb 20, 2015 at 4:37 pm

  • Copy link

  I checked your custom CSS, and I see some syntax mistakes. Might be a good move to check those first. For example, this is at the bottom but doesn’t have a closing bracket or anything in it, you should probably remove it:

  @media only screen and (max-width: 800px) {

  Also, at the top I see this:

  .site-header .home-link {
  	min-height: 140px;
  }
  }
  
  .site-header .home-link {
  	min-height: 105px;
  }
  
  .site-header .home-link {
  	min-height: 105px;
  }
  }

  That looks totally wrong. Do you see that too at https://fivestarsoda.wordpress.com/wp-admin/customize.php ?

• 

  bobbyhearn · Member · Feb 20, 2015 at 4:42 pm

  • Copy link

  Ok, took some of those away. Still not seeing any improvements in the nav bar for mobile. Sorry, I’m new and still suck at CSS.

• 

  designsimply · Member · Feb 20, 2015 at 4:42 pm

  • Copy link

  I’m not sure what’s causing the problem for the menus on mobile, but the syntax should be fixed first. Once that’s done, I would recommend making a backup of all the CSS in a text file, then deleting it, then testing the menus on mobile. If it works, add back the CSS one chunk at a time until you find which block breaks the mobile menus.

  Some possible workarounds I can think of: limit some of the CSS rules you have so they only affect large screens or try removing the #navbar block with the absolute positioning in it to see if that makes a difference.

  First though, the CSS needs to be saved in a proper format.

• 

  bobbyhearn · Member · Feb 20, 2015 at 4:57 pm

  • Copy link

  I’ve been saving every iteration of my CSS. Covered there. I tried putting chunks of it back in and I’m not getting a fix. I will say this, when messing with the #navbar portion, things get a little better on mobile and tablet, but they get worse on desktop. For example when I removed the absolute positioning line, the menu disappeared from desktop view. I think the solution is somewhere in that chunk. I just don’t know where,

• 

  bobbyhearn · Member · Feb 20, 2015 at 5:07 pm

  • Copy link

  May have gotten it. Look at it and see what you think. Changed #navbar position to relative and bumped it way down.

• 

  bobbyhearn · Member · Feb 20, 2015 at 5:10 pm

  • Copy link

  Wait, nevermind. That leaves a huge amount of black space above the header now. Menu seems to work though

• 

  bobbyhearn · Member · Feb 23, 2015 at 11:05 am

  • Copy link

  Thoughts, @designsimply? Still some black space showing above the header in mobile.

• 

  designsimply · Member · Feb 24, 2015 at 4:06 pm

  • Copy link

  I think you do actually need to use height (like I did in my first example before some other things were changed) instead of min-height. Also, there are a ton of height and min-height values all tangle up in your custom css that affect the media queries in odd ways including affecting where the menu gets placed.

  I think you could still adjust the height manually, which is not perfect but rather an approximation of a responsive header. To do it, I think you would need to: override the min-height on “.site-header” as well as “.site-header .home-link” and then set the heights manually for both of those individually for each media query you are using. It looks tricky. Be careful to test the menu if you make a changed like that.