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

    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

    Sure, thank you very much!

     

    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;
    }

    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.

    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.

     

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

    You are most welcome here 🙂

Viewing 8 posts - 1 through 8 (of 8 total)