Move the Search icon next to the main menu nav bar

Home › Forums › Gillion Theme › Move the Search icon next to the main menu nav bar

Home › Forums › Gillion Theme › Move the Search icon next to the main menu nav bar

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    RESOLVED Posts

  • zelldi
    Participant

    Hello guys,

    while I am waiting for you to implement the Slider Revolution function into the header section (as in the Jevelin theme), I am trying to improve the way the header looks on my website featuring Gillion.

     

    1. My first question is, there is a way to move the Search icon next to the main menu navigation bar? Like, next to “Galleria” in the picture I have attached. For the moment, I have hidden the Social and Bookmarks icons, and moved the Search icon on the right using this code:

    .sh-nav li.menu-item.sh-nav-share,
    .sh-nav li.menu-item.sh-nav-readmore {
    display: none;
    }

    .sh-table-cell.sh-header-meta1-container {
    position: absolute;
    right: 0;
    top: 68px;
    }

    2) My second questions is, how can I use a much larger logo? If I use one with 250px height, it gets stretched awfully.

     

    3) Third and last question: can I get rid of the social icons line in the mobile menu?

     

    Thank you very very much!

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    Hi @zelldi,

     

    I hope you are well today and thank you for your questions.

     

    Could you please share me your site URL where it’s displaying so that i can help you?

     

    Best regards,
    Shufflehound team

    zelldi
    Participant

    Sure, thank you very much!

     

    Shufflehound Support
    Moderator

    Solution for this topic

    My first question is, there is a way to move the Search icon next to the main menu navigation bar? Like, next to “Galleria” in the picture I have attached. For the moment, I have hidden the Social and Bookmarks icons, and moved the Search icon on the right using this code:

     

    You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    li.menu-item.sh-nav-search.sh-nav-special {
    position: absolute;
    right: 125px;
    top: 75px;
    z-index: 99999;
}

     

    For more accurate results you can use below plugin to display search in the menu.

     

    https://wordpress.org/plugins/add-search-to-menu/

     

    2) My second questions is, how can I use a much larger logo? If I use one with 250px height, it gets stretched awfully.

    You can increase logo height using below CSS code.

     

    .header-logo img {
    height: auto !important;
    max-height: 100% !important;
}

     

    Third and last question: can I get rid of the social icons line in the mobile menu?

    Use below CSS code to remove it.

     

    .header-mobile-social-media {
    display: none;
}

    zelldi
    Participant

    Hello,

     

    1) The problem is, when the window is down-scaled, the Search icon goes over the menu text (see attached screenshot). I guess I can’t demand too much, but this isn’t the best solution. I’ve tried the add-search-to-menu plugin, but if I use it, then there are two Search functions in the mobile menu…

     

    2) There are a few problems. If I put max-height (or width) percentages, the logo image is not centered anymore (see the attached picture). If I put pixels instead of percentages, the image is centered, but it is not responsive anymore.
    Have you got any news about Gillion implementing Revolution Slider as header? 😀 This would solve all my problems, also because I would like a big and full-of-effects header in the homepage only, and just a small logo in all other pages.

     

    3) Thank you! This works perfectly fine.

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    Solution for this topic

    1) The problem is, when the window is down-scaled, the Search icon goes over the menu text (see attached screenshot). I guess I can’t demand too much, but this isn’t the best solution. I’ve tried the add-search-to-menu plugin, but if I use it, then there are two Search functions in the mobile menu…

    Using add-search-to-menu plugin is a best solution here and we can remove duplicate search on mobile also so use it on your site and let me know so that I can help you.

     

    2) There are a few problems. If I put max-height (or width) percentages, the logo image is not centered anymore (see the attached picture). If I put pixels instead of percentages, the image is centered, but it is not responsive anymore.

    Then please try changing above shared CSS code as following.

     

    .header-logo img {
    height: auto !important;
    max-height: 100% !important;
    max-width: 100% !important;
}

    Have you got any news about Gillion implementing Revolution Slider as header? ? This would solve all my problems, also because I would like a big and full-of-effects header in the homepage only, and just a small logo in all other pages.

    Sorry but currently we don’t have any ETA.

     

    zelldi
    Participant

    Great. Thank you a lot for all your answers and patience. 🙂

    Shufflehound Support
    Moderator

    You are most welcome here 🙂

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)