Side Menu on iPhone

• 

  muslimahcoaching · Member · Feb 20, 2017 at 7:39 pm

  • Copy link
  • Add topic to favorites

  Hi,

  One a regular screen, my theme has a side menu, but on a phone, it’s hidden and the visitor must click on a tiny circle with three dots to make it show.

  https://tayyibaatwivesblog.wordpress.com/about/

  I would like to either:

  1) make the side menu show permanently on a phone,
  or
  2) change the color of the circle so that it’s more obvious since it’s in white.

  Also, the side menu widgets on the iPhone show up squashed together. Is there a way to space it out?

  Thank you.

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

• 

  staff-loquaciousloon · Staff · Feb 21, 2017 at 4:46 pm

  • Copy link

  Hi @tayyibaatwives!

  The sidebar gets relocated on smaller screens because there isn’t enough space to fit it in (everything would be tiny, and your visitors would have to scroll around and zoom in and out).

  We can make the button more noticable. Here’s some CSS that will make it match the red you see on the rest of your site:

  .sidebar-toggle {
  	background: #d11415	
  }

  You can replace that with your own HTML color code if needed.

  Also, the side menu widgets on the iPhone show up squashed together. Is there a way to space it out?

  I might not be understanding this one, so please post more details if I have the wrong idea :)

  Do you want more space in between them? Try this!

  @media screen and ( max-width: 1259px ) {
      .widget {
          margin-bottom: 25px;
      }
  }

• 

  muslimahcoaching · Member · Feb 22, 2017 at 9:51 am

  • Copy link

  Hi Chad,

  Thanks that worked really well. It looks much better now. Is there a way to make the tiny buttons white instead of black? The red color of the button is exactly what I wanted. Thank you.

• 

  staff-loquaciousloon · Staff · Feb 22, 2017 at 2:07 pm

  • Copy link

  You’re welcome!

  I think this is what you mean (it replaces the first style from last time)

  .sidebar-toggle {
      background: #d11415;
      color: #fff;
  }

  Basically I took the style to make the button red, and added color: #fff; to it :)

• 

  muslimahcoaching · Member · Feb 22, 2017 at 3:25 pm

  • Copy link

  Hi Chad,

  Thank you. It worked and looks great.

• 

  staff-loquaciousloon · Staff · Feb 23, 2017 at 1:29 pm

  • Copy link

  You’re welcome!