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.

    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!

     

    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.

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

    You are most welcome here 🙂

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

Popular choice

Professional Developers At Your Fingertips!

If you need services beyond standard support, we've got your back!

Services we offer:

Demo setup
Advanced customization
Layout adjustment
Graphic work / visualizations
Custom coding
Full WordPress development and design

Services

What we can offer

  • Demo setup +

    If you'd prefer not to handle the installation yourself or need help getting started, we'll set everything up for you.

  • Layout adjustment +

    We'll help you rearrange sections, adjust spacing, and modify the page structure to fit your needs.

  • Advanced customization +

    More complex styling changes, theme option modifications, and third-party integrations.

  • Custom coding +

    If you need something that's not included in the theme, we can code it for you.

  • Graphic work / visualizations +

    Web design services to create custom sections, pages, and blocks for your theme, plus graphics and visualizations.

  • Full WordPress development and design +

    Full website builds, custom theme development, or plugin creation from scratch.

  • About pricing +

    We'll provide a clear quote based on what you need. No hidden fees.

Professional Developers At Your Fingertips!

Custom Work Form