Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • April 30, 2020 at 10:57 am #1208474
    Telmore

    Hi,

    I have added a search box in the main menu of my site. I followed these two threads to get this to work: https://kriesi.at/support/topic/search-box-and-image-next-to-header-menu/ , and, https://kriesi.at/support/topic/adding-search-bar-to-header-cant-find-enfoldincludes-folder/#post-476685

    But as I use a megamenu, the dropdown in the menu has now moved to the left of the screen, so it is not visible in its entirety. How do I get it back to align in the center of the screen?

    Best regards,
    Susanne

    May 1, 2020 at 12:21 pm #1208818
    Rikard

    Hey Susanne,

    Could you post a link to where we can see the results you are getting please?

    Best regards,
    Rikard

    May 1, 2020 at 3:40 pm #1208853
    Telmore
    This reply has been marked as private.
    May 1, 2020 at 9:26 pm #1208954
    Jordan Shannon

    Hi,

    Add this to quick css:

    #top #header .avia_mega_div > .sub-menu{
left:100px!important;
}

    Best regards,
    Jordan Shannon

    May 4, 2020 at 8:32 am #1209446
    Telmore

    Hi Jordan,

    Thanks! But it didn’t completely do the trick. I tried changing the px, but it seemed to make a bigger blue gap from the left. I have attached screenshots of this.

    Best regards,
    Susanne

    May 7, 2020 at 8:17 am #1210638
    Telmore

    Hi,

    Are there any updates on this yet? :)

    Best regards,
    Susanne

    May 12, 2020 at 11:38 am #1212095
    Victoria

    Hi Susanne,

    The thing is the position of the mega menu is calculated with JavaScript and placing the form there you changed the variables but the code does not account for that. I tried to come up with the css to fix the issue but the solution is with the JavaScript.

    You need to edit the avia.js file, this fucntion – aviaCalcContentWidth

    Try adding the line there:

    
w_12 -= 130;

    Image 2020-05-12 at 12.38.30.png

    Best regards,
    Victoria

    May 12, 2020 at 1:13 pm #1212150
    Telmore

    Hi Victoria,

    That makes sense :)
    I tried adding the line to avia.js, but it did not make a difference.

    Would there be another way to add the search field to the menu instead of how I did it, and make the mega menu behave right?

    Best regards,
    Susanne

    May 12, 2020 at 6:29 pm #1212305
    Victoria

    Hi Susanne,

    You can add the search icon in the theme options, the search will still be there but the mega div positioning should be correct then.

    Best regards,
    Victoria

    May 13, 2020 at 8:30 am #1212521
    Telmore

    I had it that way in the beginning, but our users gave us feedback on it being too easy to miss among the other menu items

    Best regards,
    Susanne

    May 13, 2020 at 11:22 am #1212567
    Telmore

    Would it be possible to give the search icon a white box background?

    Best regards,
    Susanne

    May 13, 2020 at 9:56 pm #1212779
    Jordan Shannon

    Hi,

    Add this to quick css:

    #menu-item-search a{
height: 38px!important;
width:38px!important;
background: #fff!important;
line-height: 58px!important;
top: 20px!important;
color: #000!important;
margin-top: 25px!important;
}

#menu-item-search a[data-av_iconfont='entypo-fontello']:before{
    top: 18px!important;
    position: absolute!important;
}

    Best regards,
    Jordan Shannon

    May 14, 2020 at 11:22 am #1212908
    Telmore

    Thanks! That did the trick :)

    Best regards,
    Susanne

    May 14, 2020 at 11:26 am #1212910
    Telmore

    Wait. I just noticed that when I scoll down on the site, the search icon overlaps the topmenu. It does not shrink as the rest of the menu does. Could you help fix this?

    Best regards,
    Susanne

    May 14, 2020 at 8:41 pm #1213041
    Jordan Shannon

    Hi,

    Add this to quick css:

    .header-scrolled #menu-item-search a{
margin-top:2px!important;
}
.header-scrolled #menu-item-search a[data-av_iconfont='entypo-fontello']:before {
    top: -5px !important;
}

    Best regards,
    Jordan Shannon

    May 15, 2020 at 8:13 am #1213165
    Telmore

    Hi Jordan,

    That works perfectly! Thanks for all the help :)

    Best regards,
    Susanne

    May 16, 2020 at 1:39 pm #1213555
    Rikard

    Hi Susanne,

    Great, I’m glad that Jordan could help you out. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    May 18, 2020 at 7:47 am #1213919
    Telmore

    Hi Rikard,

    You can close this :)

    Best regards,
    Susanne

    May 18, 2020 at 7:52 pm #1214104
    Jordan Shannon

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 19 posts - 1 through 19 (of 19 total)
  • The topic ‘Search field in main menu + megamenu’ is closed to new replies.