Mobile Menu-Toggle

• 

  theplumberscoach · Member · Feb 9, 2016 at 5:47 pm

  • Copy link
  • Add topic to favorites

  I am useing the Franklin Theme. I have 6 menu buttons that become one in tablet or phone mode. The tablet is fine, but the mobile button covers my logo. In the Button.Menu-Toggle if the {position: absolute; is cut off it moves to a good position to view the logo. I have attempted a CSS command and got error messages. How could I change the command to “relative”? Or just un-check it?

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

• 

  thesacredpath · Member · Feb 9, 2016 at 10:01 pm

  • Copy link

  Hi, we can use a Media Query to change the position: abosolute; for screens 450px and narrower, which is about the place that the menu button starts to encroach on your logo. Add this to your custom CSS.

  @media screen and (max-width: 450px) {
  	.main-navigation .menu-toggle {
  		position: inherit;
  	}
  }

• 

  theplumberscoach · Member · Feb 9, 2016 at 10:12 pm

  • Copy link

  Awesome! Thank you very much!

• 

  thesacredpath · Member · Feb 10, 2016 at 12:29 am

  • Copy link

  You are welcome.

• 

  billgrizer · Member · Feb 12, 2016 at 12:59 am

  • Copy link

  Hello,

  I have a question that relates to this topic. I am concerned about my website look and rendering on mobile – the menu toggle displays behind my logo. I want to see if I can use CSS to move page titles to the bottom left of featured images instead of center (on both desktop and mobile) and move the menu toggle to the bottom right of the featured images (on mobile only if possible).

  Can you help with this?

  Thanks!

  I am using the Twotone Theme. My website is barbaragrizer.com

• 

  thesacredpath · Member · Feb 12, 2016 at 7:46 am

  • Copy link

  Hi @lbraga141093, since you are using a different theme, and since CSS is generally theme specific, can I ask you to create a new thread in the CSS Forum? Many thanks in advance.