Penscratch 2 – Use Desktop Menu for Mobile

• 

  mariakgalang · Member · Jun 4, 2019 at 5:31 pm

  • Copy link
  • Add topic to favorites

  Hi – I am fairly new to CSS edits. I would appreciate your help.

  I have managed to do things like adjusting margins etc., however, I would also like to avoid that the theme automatically switches to the drop-down “Hamburger” style menu on mobile devices. Instead, I’d like to use the desktop side-by-side menu also on mobile devices.

  This is because my menu has only two options i.e. these can be displayed side-by-side even on most mobile phones, which looks cleaner than the hamburger.

  Is there a way of suppressing this auto-switch to the hamburger menu, and to use the desktop theme on mobile devices instead?

  Thank you
  M

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

• 

  gemmacevans · Member · Jun 5, 2019 at 9:59 am

  • Copy link

  Hi mariakgalang,

  Sure! Please try pasting the following CSS in to My Sites > Customise > CSS (underneath what is already there):

  @media only screen and (max-width: 800px) {
        .menu-toggle {
              display: none;
        }
        .main-navigation ul:first-child {
              display: block;
              text-align: center;
        }
        
        .main-navigation li {
              display: inline-block;
              margin-left: 15px;
              margin-right: 15px;
        }
  }

  If you need any further help, feel free to start a chat :)