Header

  • Resolved wavo

    (@wavo)


    9 years, 8 months ago

    Hi,

    I have a problem with my logo and header image conflicting when in mobile view, I have been though all the setting and am still researching on how to amend this but any advice would be gratefully received 🙂

    If you view my site below:

    http://www.worldofmobility.org.uk/

    then view in in mobile view, you can see the two images overlap.

    I am wondering how I can amend this, i cant change to widget area at the top as it removes my menu from its current place. I was thinking I could remover the header image from just the mobile view but am unsure on how to do this.

    any help would be gratefully received 🙂

    David

Viewing 8 replies - 1 through 8 (of 8 total)
  • Theme Author Ben Ritner – Kadence WP

    (@britner)

    9 years, 7 months ago

    What would you like? With css I can help you rearrange the items, Do you want the background image to just disappear in mobile? Or would you rather the logo get pushed down below it?

    Kadence Themes

    Thread Starter wavo

    (@wavo)

    9 years, 7 months ago

    I would Prefer the logo to be pushed below it on mobile view, i have been searching a searching but this seems kind of above my ability a the moment 🙁

    It might be nice to be able to see both, but as long as they don’t conflict it should be fine.

    Any help would be gratefully appreciated 🙂

    Theme Author Ben Ritner – Kadence WP

    (@britner)

    9 years, 7 months ago

    @media (min-width: 768px) {
#logo {
padding-top: 125px;
}
}

@media (min-width: 480px) {
.headerclass {
background-position-y: 30px;
}
}

    add to your custom css box in the theme options > advanced settings.

    Kadence Themes

    Thread Starter wavo

    (@wavo)

    9 years, 7 months ago

    Hi,

    it did not change anything on the mobile view, they still overlapped but on the normal view it has shifted the logo down and left the header in place 🙁

    Thank you for you efforts

    hopefully we can figure it out, I am stumped.

    David

    hannah

    (@hannahritner)

    9 years, 7 months ago

    Hey, I think they just mixed up the min and max widths. Try this:

    @media (max-width: 768px) {
#logo {
padding-top: 125px;
}
}

@media (max-width: 480px) {
.headerclass {
background-position-y: 30px;
}
}

    Hope that works!
    Hannah

    Thread Starter wavo

    (@wavo)

    9 years, 7 months ago

    Hi Hannah, I still did not work, I tried adjusting the px but even then the logo did not more or the header, I am thinking that mayebe my css is conflicting with each other:

    @media (min-width: 992px) {
    body .main {float:right;}
    .page-header {display:none;}
    .product-categories .cat-item a:after {
    display: none;
    }
    .footer-widget .widget, .footer-widget {
    margin-top:0;
    }
    #containerfooter {
    padding-top: 0;
    }
    .footercredits {
    padding-top: 0;
    padding-bottom: 0;
    }
    .home-padding {
    padding: 15px;
    }
    .home .sliderclass { padding-bottom: 0; }
    @media (max-width: 768px) {
    #logo {
    padding-top: 125px;
    }
    }

    @media (max-width: 480px) {
    .headerclass {
    background-position-y: 30px;
    }
    }

    David

    Theme Author Ben Ritner – Kadence WP

    (@britner)

    9 years, 7 months ago

    Yes you css is… should be:

    @media (min-width: 992px) {
body .main {float:right;}
}
.page-header {display:none;}
.product-categories .cat-item a:after {
display: none;
}
.footer-widget .widget, .footer-widget {
margin-top:0;
}
#containerfooter {
padding-top: 0;
}
.footercredits {
padding-top: 0;
padding-bottom: 0;
}
.home-padding {
padding: 15px;
}
.home .sliderclass { padding-bottom: 0; }
@media (max-width: 768px) {
#logo {
padding-top: 125px;
}
}

@media (max-width: 480px) {
.headerclass {
background-position-y: 30px;
}
}

    Kadence Themes

    Thread Starter wavo

    (@wavo)

    9 years, 7 months ago

    Thankyou, That has been bugging me for a while now 🙂

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Header’ is closed to new replies.

Tags