April 13, 20206 yr Hi I have been struggling with this responsive menu (link to code pen below). If anyone could help me with the following: https://codepen.io/m-herda/pen/OJyVraq 1. How do I make text-decoration: none; work on the li elements on small devices (once I've unfolded the menu by clicking the hamburger button). It's set on #main-menu li a but only affects li elements on bigger screens. 2. On a smaller screens, once you've unfolded the menu, the logo image on the left hand side gets pulled down to the vertical centre. a) I'd like the logo image to stay where it initially was (at the top) b) and the li items take the whole width of the visible screen so the screen with unfolded menu should look as follows: LOGO HAMBURGER --------------HOME----------------- ------------SERVICES-------------- ------------PROJECTS------------ ------------BLOG------------------- The Hero area below could be either covered by the li elements or pushed down to start below the last li element. It does not matter. Also, once you've unfolded the menu, the hamburger icon gets stretched. I have been stuck on that for the last 2 days and it's driving me crazy:) Thank you
April 15, 20206 yr Author Cheeky bump:) Anyone? At least one of the points raised. I have really put an effort in trying to get to the bottom of it... Thank you
April 15, 20206 yr It's a bit messy but this should be roughly what you're after. https://codepen.io/jackpallot/pen/xxwZZvq
April 15, 20206 yr Author Brilliant. Thank you. Works ok. I've integranted it with a wordpress menu and it's all good. Thank you.
Create an account or sign in to comment