Image in header

Home Forums All Other Themes Image in header

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #122460
    remko1
    Participant
    • Topics: 7
    • Replies: 16
    • Total: 23
    Member since: April 9, 2019

    Hello,

    I want to put an image in the header, but on small screens the image goes behind the menu, see: http://prntscr.com/nhvucs

    Also it doens’t look good on mobile devices. With what code can i fix this?

    website: napoleon.whayklanten.nl

    #122486
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 22416
    • Total: 22416
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

    @media screen and (max-width:1023px) {
    .header-top-right {
        float: none !important;
        margin: 0 auto 15px !important;
        width: 100%;
        display: table;
    }
    .header-top-right div {
        float: none !important;
        margin: 0 auto !important;
        display: table;
    }
    }
    
    @media screen and (min-width:1024) and (max-width:1160px) {
    #topmenu ul li a { padding:20px 10px;}
    }

    Regards,
    Dave

    #122509
    remko1
    Participant
    • Topics: 7
    • Replies: 16
    • Total: 23
    Member since: April 9, 2019

    This helped but the image is cropped now

    #122534
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 22416
    • Total: 22416
    Member since: August 16, 2013

    Hi,

    Kindly use this one

    .header-top-right { width:15%;}
    #topmenu ul li a { padding:20px !important;}
    .teamviewer { width: 100%; height: auto;}
    .header-top-right div { width: auto !important; height: auto !important;}

    Regards,
    Dave

    #122557
    remko1
    Participant
    • Topics: 7
    • Replies: 16
    • Total: 23
    Member since: April 9, 2019

    Hello, this also worked but now the height is different and on tablet/ipad its not good. See: http://prntscr.com/nil5qs

    #122558
    remko1
    Participant
    • Topics: 7
    • Replies: 16
    • Total: 23
    Member since: April 9, 2019

    Also on apple devices the website scrolls really fast. How can I fix that?

    #122566
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 22416
    • Total: 22416
    Member since: August 16, 2013

    Hi,

    Kindly use this

    @media screen and (min-width:768px) and (max-width:1023px) {
     .header-top-right { width:35% !important;}
    }

    Regards,
    Dave

    #122569
    remko1
    Participant
    • Topics: 7
    • Replies: 16
    • Total: 23
    Member since: April 9, 2019

    Thanks Dave,

    And the scrolling?
    Also the menu needs to be lowered. before i could do this with

    .type1 #topmenu {
        float: right;
        margin-top: 41px;
        border-radius: 100px;
    }
    

    But that doesnt work anymore.

    #122572
    remko1
    Participant
    • Topics: 7
    • Replies: 16
    • Total: 23
    Member since: April 9, 2019

    So sorry for nont being easy but the support icon is wrong on phones/tablets: http://prntscr.com/nim70n

    Also can i make the background blue on phones?

    #122578
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 22416
    • Total: 22416
    Member since: August 16, 2013

    Hi,

    Please send us your WordPress credentials to @sktthemes.com">support@sktthemes.com Please mention this forum URL while replying so that we understand what needs to be done.

    We will solve this issue directly on your server.

    Regards,
    Dave

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.