poss to make the navigation on mobile appear as drop down?

  • laurapalmerwp · Member ·

    Is it possible to force the navigation on mobile to appear as a drop down at the top – using the Capoverso theme? Currently, it is appearing bottom right on all pages except the blog – where its bottom left (on the desktop version I have already forced the navigation to appear top right on all pages – as it was on one side on the blog and the other elsewhere).

    The type of menu I mean is where you get a little square icon with lines – representing the menu you click on.

    If not, is there another neat solution? Just for it to appear on one side would be better. Preferably the left side on the mobile.

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

  • jeremeylduvall · Member ·

    Hi!

    I just want to make sure I understand what you’re looking for. Currently, on mobile displays, the menu, which appears on the sidebar of posts at desktop sizes, is moved the bottom of the page like this:

    http://d.pr/i/1gmg2

    Instead, you would like it to appear towards the top of the screen hiding behind a hamburger icon (like the one shown here). Is that correct?

  • laurapalmerwp · Member ·

    Hi – yes exactly right.

  • jeremeylduvall · Member ·

    Hi!

    Thanks for clarifying! It won’t be possible to insert the toggle hamburger icon just using CSS. That would require some Javascript as well, which can’t be added to WordPress.com themes.

    However, with the help of @designsimply (a magician with CSS), we were able to come up with a CSS code that will move the menu to the top of the page on mobile devices. Please note, the CSS is custom to the Capoverso theme and your current CSS codes you have setup.

    Here’s the CSS code to add to the bottom of your current custom CSS:

    @media screen and (max-width: 1008px) {
	#page {
		position: relative;
	}

	.main-navigation {
		position: absolute;
		top: 0;
		right: 0;
	}

	.home #page {
		position: static;
	}

	.single #primary,
	.blog #primary{
		padding-top: 40px;
	}
}

    Can you give that a try? In case you’re curious on the positioning and how this works, here’s an awesome guide to check out:

    Absolute Positioning Inside Relative Positioning

  • laurapalmerwp · Member ·

    Blimey, thanks very much! I have to say I am always astounded how helpful people are on here.

    Its a good work around for now and looks even better on the blog site that it’s eventually going to be on http://mygoodmeasure.wordpress.com/ (mine is just for testing purposes right now). That version is a bit more styled up etc.

    But if you come across any other any other wizard-type coders in the near future who might know how to do the mobile hamburger icon thing – then let me know!

    Cheers again!

  • jeremeylduvall · Member ·

    Blimey, thanks very much! I have to say I am always astounded how helpful people are on here.

    Not a problem! We’re happy to help. Please let us know if you need anything else.

  • The topic ‘poss to make the navigation on mobile appear as drop down?’ is closed to new replies.