[Support request] Searchbar in the header image

Home Forums Support [Support request] Searchbar in the header image

Home Forums Support Searchbar in the header image

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #250614
    sjoerd89

    Hi there i would like to get my search bar in the header image on the right. something like this ->(https://imgur.com/RHyuEjd)
    At the moment i used the search widget to display in in the header space but that makes it go on top of the image. Is this a simple fix?
    I can’t show you a link to the website because it is offline but i made a codepen with the site maybe you can use that to see. http://codepen.io/Sjoerd89/pen/jVYReb

    Have a nice day,

    Sjoerd

    #250688
    Tom
    Lead Developer
    Lead Developer

    Couple options.

    Make the header image (behind the logo) a background so things can sit on top of it.

    Or you can position:absolute the header widget:

    .header-widget {
        position: absolute;
        right: 20px;
        top: 20px;
    }

    Hope this helps 🙂

    #251477
    sjoerd89

    Using the CSS and tweaking it a little bit will make it go in the right place (for me).
    Now with this it won’t be responsive so on tablets or mobile screens the placing of the searchbar will be in a weird place. Now i tried the add the header image as background to the header and then remove the normal header image but this will make my background image not show at all.

    Maybe this has something to do with my header and navigation being stuck together and i made them fixed.

    .custom-fixed-header {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 2000;
    }
    body {
        padding-top: 118.4px;
    #251627
    Tom
    Lead Developer
    Lead Developer

    That shouldn’t stop the header background from appear.

    However, you would want to separate the background of the header and your logo into two different files.

    Then upload the background, and upload the logo like normal in “Customize > Site Identity”.

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