Search icon moved when added headline at the top

8 Comments

  • Ifra Saqlain
    Community Moderator

    Add position relative into your .search.. class on your stylesheet.

    Let me know if not resolve your issue.

    Thanks

    0
  • Ifra Saqlain
    Community Moderator

    Or Import new Copenhagen theme and you can compare your searchbar code.

    0
  • Melody Quinn

    Not sure if this helps, but it took us a little bit to get our help site the banner the way we wanted it.

    We add this to our css file: 

    .communitytitle {
    position: left;
    color: #E9EEF2;
    font-family:trebuchet MS;
    font-size: 45pt;
    padding-left: 12%;
    }

     

    .helptitle {
    color: #E9EEF2;
    font-family:trebuchet MS;
    font-size: 30pt;
    }

    And this to the homepage template:

    0
  • Pulkit Pandey
    Community Moderator

    Hi Big Sur

    You have to Update the following CSS on your style.css file, Search for the following Class .search-icon and update the below property.

    .search-icon { 
        top: 79%;
    }

    It's a default class on the Copenhagen theme

    Let me know if it solves your issue

    Thanks 

    Pulkit

    0
  • Big Sur

    Thanks all for your help!

    Changing the position did the trick, BUT only on the homepage and on the other pages it moved the search icon lower than it’s supposed to now haha.

    This is the code, I have had translateY set to the to the same as the top -79% but that didn’t make any difference. On my homepage 87% looks a bit more centred but that’s probably because I made the hero area bigger.

    .search-icon {
    position: absolute;
    top: 79%;
    transform: translateY(-50%);
    position: absolute;
    left: 15px;
    z-index: 1;
    width: 18px;
    height: 18px;
    color: #777;

    So yeah it sort of worked and sort of didnt :) Any other hints would be appreciated

    0
  • Pulkit Pandey
    Community Moderator

    Hi Big Sur

    Sorry for the wrong code :)

    Please, revert back .search-icon CSS to its default one i.e 

    .search-icon { 
        top: 50%;
    }

    Now here goes the solution to your problem

    place the below code at the bottom of your style.css file

    .hero .search-icon {
      top: 79%;
    }

    Let me know if it solves your issue 

    Thanks 

    Pulkit

    0
  • Big Sur

    HI Pulkit Pandey, thanks so much!

    That did the trick for me, just had to adjust the percentage a little as I made my .hero a little wider.

    Thanks again,

    Nikita

    0
  • Pulkit Pandey
    Community Moderator

    Hi Big Sur

    Happy to hear that it solves your issue :)

    Thanks 

    Pulkit

    0

Please sign in to leave a comment.

Powered by Zendesk