Header

  • Resolved wavo

    (@wavo)


    10 years, 3 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:

    https://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)

  • 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)

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

    @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)

    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)

    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)

    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

    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)

    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