• Resolved KameramanDan

    (@kameramandan)


    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

    (@kameramandan)

    Thread Starter KameramanDan

    (@kameramandan)

    Bump, anyone?

    Alexandra

    (@alexandrastan001)

    Hello,

    What version of the theme are you using?

    Best regards,
    Alexandra

    Thread Starter KameramanDan

    (@kameramandan)

    1.8.2.8

    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

    (@kameramandan)

    Thanks @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?

    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/

    Thread Starter KameramanDan

    (@kameramandan)

    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!

    Hello,

    Please check this doc:http://docs.themeisle.com/article/14-how-to-create-a-child-theme
    I hope it will help you.

    Regards,
    Gourav

    Thread Starter KameramanDan

    (@kameramandan)

    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.