Title: Mobile site header misalignment
Last modified: August 30, 2016

---

# Mobile site header misalignment

 *  Resolved [KameramanDan](https://wordpress.org/support/users/kameramandan/)
 * (@kameramandan)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/mobile-site-header-misalignment/)
 * The menu button in the mobile site header isn’t sitting next to the logo, it’s
   stuck above. This is causing the background to move when scrolling.
 * No code customisation at all.
 * Can anyone suggest a fix for this?
 * Thanks

Viewing 10 replies - 1 through 10 (of 10 total)

 *  Thread Starter [KameramanDan](https://wordpress.org/support/users/kameramandan/)
 * (@kameramandan)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/mobile-site-header-misalignment/#post-6745025)
 * Screenshot here: [http://trafficpower.com.au/screen.png](http://trafficpower.com.au/screen.png)
 *  Thread Starter [KameramanDan](https://wordpress.org/support/users/kameramandan/)
 * (@kameramandan)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/mobile-site-header-misalignment/#post-6745181)
 * Bump, anyone?
 *  [Alexandra](https://wordpress.org/support/users/alexandrastan001/)
 * (@alexandrastan001)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/mobile-site-header-misalignment/#post-6745237)
 * Hello,
 * What version of the theme are you using?
 * Best regards,
    Alexandra
 *  Thread Starter [KameramanDan](https://wordpress.org/support/users/kameramandan/)
 * (@kameramandan)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/mobile-site-header-misalignment/#post-6745238)
 * 1.8.2.8
 *  [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/)
 * (@kharisblank)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/mobile-site-header-misalignment/#post-6745248)
 * It happens because the image logo is a bit wider on mobile screen. Try to add
   the following CSS code.
 *     ```
       @media only screen (max-width: 367px){
        .navbar-brand img{
          max-width: 200px;
          height: auto;
        }
       }
       ```
   
 * I hope it helps.
 *  Thread Starter [KameramanDan](https://wordpress.org/support/users/kameramandan/)
 * (@kameramandan)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/mobile-site-header-misalignment/#post-6745252)
 * Thanks [@kharis](https://wordpress.org/support/users/kharis/),
 * I added your code to the bottom of style.css and it didn’t work.. however changing
 *     ```
       .navbar-brand > img {
       	max-height: 100%;
       }
       ```
   
 * to
 *     ```
       .navbar-brand > img {
       	height: auto;
       	max-with: 200px;
       }
       ```
   
 * did work…
 * Will that code change have any impacts elsewhere in the theme? I notice that 
   it has changed the logo on the desktop site slightly, but that’s ok as it’s only
   a tiny change and doesn’t really affect the look of the site.
 * Also I tried to add this to a child theme as themes/zerif-lite-child/ with the
   following code in style.css:
 *     ```
       /*
        Theme Name:   Zerif Lite Child
        Theme URI:    http://trafficpower.com.au/wp-content/themes/zerif-lite-child/
        Description:  Zerif Lite Child Theme
        Author:       Dan Power
        Author URI:   http://danpower.com.au
        Template:     zerif-lite
        Version:      1.0.0
        License:      GNU GPL
        License URI:
        Tags:
        Text Domain:  zerif-lite-child
        */
   
       .navbar-brand img{
            max-width: 200px;
            height: auto;
           }
       ```
   
 * but as soon as I enabled it the theme went crazy, almost all customisation disappeared
   and the theme elements were all over the place… is it easy to add a child theme,
   have I done something wrong here?
 *  [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/)
 * (@kharisblank)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/mobile-site-header-misalignment/#post-6745253)
 * I tried to create a child theme. I got the same issue on my end.
 * Try to switch back to parent theme. All customisation should back.
 * To add custom CSS code, use this plugin [https://wordpress.org/plugins/simple-custom-css/](https://wordpress.org/plugins/simple-custom-css/)
 *  Thread Starter [KameramanDan](https://wordpress.org/support/users/kameramandan/)
 * (@kameramandan)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/mobile-site-header-misalignment/#post-6745254)
 * That’s a nightmare. This theme seems to update regularly and I don’t want to 
   have to change this code every time….
 * I’ll start a new thread about child themes.
 * Thanks for your help!
 *  [gouravwptech](https://wordpress.org/support/users/gouravwptech/)
 * (@gouravwptech)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/mobile-site-header-misalignment/#post-6745255)
 * Hello,
 * Please check this doc:[http://docs.themeisle.com/article/14-how-to-create-a-child-theme](http://docs.themeisle.com/article/14-how-to-create-a-child-theme)
   
   I hope it will help you.
 * Regards,
    Gourav
 *  Thread Starter [KameramanDan](https://wordpress.org/support/users/kameramandan/)
 * (@kameramandan)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/mobile-site-header-misalignment/#post-6745257)
 * Yatta! It works, thanks very much all!

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Mobile site header misalignment’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/zerif-lite/1.8.5.49/screenshot.
   png)
 * Zerif Lite
 * [Support Threads](https://wordpress.org/support/theme/zerif-lite/)
 * [Active Topics](https://wordpress.org/support/theme/zerif-lite/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/zerif-lite/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/zerif-lite/reviews/)

 * 10 replies
 * 4 participants
 * Last reply from: [KameramanDan](https://wordpress.org/support/users/kameramandan/)
 * Last activity: [10 years, 6 months ago](https://wordpress.org/support/topic/mobile-site-header-misalignment/#post-6745257)
 * Status: resolved