Positioning mobile menu twenty twelve

  • Resolved erwin_m

    (@erwin_m)


    11 years, 2 months ago

    Hi, I’m trying to edit the twenty twelve theme in a way so that on a desktop screen my menu is at the same hight and at the right of the title of the website. On a mobile device I don’t want it at that position because its on my title. So I want to position it a bit lower.
    Does anyone have a clue how to edit this theme in this way? I’ve tried to work with @media, but this is the first time that I’m working with this. Its not working for me, but that can be my fault.

    Anyone suggestions?

    Thanks for reading/thinking and I hope answering.

    Sorry for mt poor Englisch.

Viewing 7 replies - 1 through 7 (of 7 total)
  • WPyogi

    (@wpyogi)

    11 years, 2 months ago

    Do you have a child theme or custom CSS set up? You should not be making any changes in theme files- especially in the default theme.

    Thread Starter erwin_m

    (@erwin_m)

    11 years, 2 months ago

    I’m using a child-theme of course..

    WPyogi

    (@wpyogi)

    11 years, 2 months ago

    Great – just checking :). What have you tried? A link to your site would be helpful too.

    Thread Starter erwin_m

    (@erwin_m)

    11 years, 2 months ago

    Ok, the url is http://bit.ly/RhQNyQ I’ve tried a view things with the @media code and then absolute positioning. But this doesn’t work. I cant find any other code special for the mobile menu.

    WPyogi

    (@wpyogi)

    11 years, 2 months ago

    Try using “float: right;” and a negative top margin for the desktop styling. That seems to work better in Firebug – though you’ll need to test it fully on your live site.

    Also, note that you have two CSS sections for the navigation in your child theme – so you probably want to get rid of one of them — so you don’t have conflicting, unnecessary code in there.

    Thread Starter erwin_m

    (@erwin_m)

    11 years, 2 months ago

    After changing the code like you said, it was a lot better. But on my cellphone the men-button was still in the header. So I’ve kept puzzling and found something in the original style.css, with this code and your code combined, I’ve got my solution. The code I’ve added is

    /* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
	#site-navigation {float:right;margin-top:-30px;}
}

    Thanks for thinking with me, that usually gets me to a solution.

    WPyogi

    (@wpyogi)

    11 years, 2 months ago

    Yes, that’s what I had in mind too – should have been more specific – but you’re on top of it, clearly :)! Looks good. And BTW, your English is super – I would not even have guessed it’s not your first language.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Positioning mobile menu twenty twelve’ is closed to new replies.