Menu disappeared from mobile view

  • Resolved Nicholas

    (@nerwin)


    8 years, 5 months ago

    I modified the header show the site header so it looks like this: http://nickerwin.com/wp-content/uploads/2015/11/headersample.png

    My website is nickerwin.com

    I did this simply by changing one of the margins to -180px: 

    .site-header {
	margin: 0 -180px 27px;
	padding: 0 0 15px;
	border-bottom: 1px solid #eee;
}

    But when I resize the browser window and make it go into mobile view…that’s where problems are hiding. The page now has a lot of padding on the right side which enables the horizontal scroll bar on desktop and pushes the website off to the side on a mobile device (atleast on mine anyways). Then when you click the menu toggle button, there is no menu items though its still clickable.

    I found out the navigation is tied in with the header css class, so by adding the -180px margin, it messed up the navigation.

    I tried everything and I can’t get it to look normal in mobile view. I’m sure changing the site-header margin to -180px isn’t the correct way to make the header look the way I want.

    I’ll be honest, I don’t have much experience with this stuff. I just want to get my website finished so I can start blogging again. Genesis framework has a similar theme, but I can’t afford $100 right now so I’m trying to make it look close as I can.

    Any help would be awesome…Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Kathryn Presner

    (@zoonini)

    8 years, 5 months ago

    Hi Nick, the first thing we should sort out is that it looks like you modified the theme files directly, right? That means that every time you update Penscratch to the latest version, you’ll lose all your changes as they’ll be overwritten.

    The best way to make CSS changes in a theme is by adding the styles you want to override within a custom CSS plugin, or alternatively in a child theme, if you need to make changes beyond just CSS.

    Since you’re already using Jetpack, an easy way to add custom CSS is to activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

    Once you activate the Custom CSS module, I’d suggest you move all your CSS overrides into the CSS editor, and then reinstall a fresh copy of the theme so you’ll be all set and won’t lose your tweaks after every theme update.

    To restrict your CSS change to large screens, you can try putting it in a media query so it doesn’t affect mobile devices. For example:

    @media screen and (min-width: 960px) {
  .site-header {
    margin: 0 -180px 27px;
  }
}

    You can learn more about using media queries that target certain screen sizes here:

    http://en.support.wordpress.com/custom-design/custom-css-media-queries/
    http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
    http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

    Thread Starter Nicholas

    (@nerwin)

    8 years, 5 months ago

    Thanks for your reply. I eventually plan on moving everything to a child theme as I’ve made modifications to the PHP code as well, or I just wont update the theme.

    Anyways, I tried your suggestion…but I have already tried that once before and it does absolutely nothing.

    Soon as I remove the -180px in the .site header, the menu appears back in normal form. But I lose the way the header looks.

    I don’t know what to do..maybe it just can’t be done with this theme.

    Moderator Kathryn Presner

    (@zoonini)

    8 years, 5 months ago

    It’s tricky to say, since there’s no way right now for me to isolate the other changes you’ve made.

    Generally, wrapping CSS in a media query restricts it to just the minimum or maximum screen width you’ve defined.

    If you want to put the variation back with the media query (since you said it had no effect) I could take a look at it if you like.

    Thread Starter Nicholas

    (@nerwin)

    8 years, 5 months ago

    I finally figured it out. I don’t remember what I did exactly..but it worked and that’s all that matters. But I think it was something to do with the media query min width. I also went ahead with your suggestion and created a child theme and that is working fine..mostly.

    Thanks for your help though!

    Moderator Kathryn Presner

    (@zoonini)

    8 years, 5 months ago

    Excellent! Glad you’re set and that you moved your tweaks into a child theme. 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Menu disappeared from mobile view’ is closed to new replies.