Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • October 28, 2017 at 3:16 pm #869915
    phinixF3

    Hey,

    I’d like to know how I can have the search icon on the left side, the logo centered and the burger menu on the right side in the mobile view. I already figured out how to have the logo centered and the burger menu is already on the right site by default. So now I’m wondering how I can get the search icon on the left side? It should kinda look like the mobile view of the apple.com.

    Thanks in advance,
    Marlon

    October 28, 2017 at 3:52 pm #869929
    Guenni007

    have a look to this –
    i do not know if you have social icons too besides the burger menu icon
    and how did you center the logo (its in my code implemented)
    you have to style it for the different responsive cases.

    https://webers-testseite.de/elegant/

    you must use a child-theme for this solution:

    this comes to functions.php of yout child-theme:

    add_filter( 'ava_main_header', 'avia_append_search_header_mod');
function avia_append_search_header_mod()
{
  global $avia_config;
  ob_start();
  get_search_form();
  $form =  htmlspecialchars(ob_get_clean()) ;
  $items .= '<div id="menu-item-search">
	      		<a href="?s=" data-avia-search-tooltip="'.$form.'" '.av_icon_string('search').'>
	      		<span class="avia_hidden_link_text">'.__('Search','avia_framework').'</span>
	      		</a>
         	</div>';
    echo $items;
}

    this comes to quick css:

    div .logo, .logo img, .logo .subtext img {
    left: 50%;
    transform: translateX(-50%);
}
#top #header_main #menu-item-search {
    position: absolute;
    left: 25px;
    top: 25px;
}
#top #header_main #menu-item-search a {
    color: #333;
    font-size: 24px;
}
.responsive #top .logo {
    position: relative;
}
    October 28, 2017 at 4:20 pm #869953
    Guenni007

    so it depends now if you have social icons on the right side – if so we had to style the positioning again
    f.e. the .avia-menu.av_menu_icon_beside

    October 28, 2017 at 4:28 pm #869955
    phinixF3

    Thanks for the fast reply, I’ll take a look at it later. Yes https://webers-testseite.de/elegant/ is exactly how it should look like in mobile view, but I still want to keep the regular desktop version.

    No, no social icons.

    October 28, 2017 at 4:59 pm #869968
    Guenni007

    that means on non responsive case you have the text menu?
    no difference between the codes – only if you have a top-navigation

    October 29, 2017 at 7:47 pm #870189
    phinixF3

    With responsive case you mean the mobile view and with text menu you mean the menu in the desktop version? Yes in the desktop version I don’t want anything to change.

    Applied your codes, but didn’t quite work. Logo was on the right overlapping the burger menu (maybe because I already moved the logo to the center) and then I got two search icons. The old one was slightly misplaced and the new one was at the right place in mobile view and in desktop view both search icons got misplaced.

    Edit: I didn’t use the child theme I just put the first code into functions.php

    • This reply was modified 7 years, 2 months ago by phinixF3.
    October 30, 2017 at 3:25 pm #870507
    Guenni007

    well first – you don’t want to have two search icons ? – yes – so remove the one by dashboard – enfold(-child) – hauptmenu – Append search icon to main menu
    uncheck the box.
    Try to get rid of your code to center the logo.
    if you haven’t anything against it post a live link to your page.

    Get familiar with child-themes – this is the only way to do proper hooks and filters.
    You don’t loose changes by updating the parent theme

    See here with download. No Magic behind it:
    Theme-Documentation: https://kriesi.at/documentation/enfold/
    Using Child-Theme: https://kriesi.at/documentation/enfold/using-a-child-theme/
    Download a predefined child-theme: http://bit.ly/enfold-child

    January 14, 2018 at 8:08 am #897039
    Micha66

    Works perfect!
    What must i do to get the seach icon in the right color by transparent Header?

    January 15, 2018 at 7:26 am #897409
    Micha66

    And one more question: Is it possible to have the search icon right and the hamburger left? If the search icon is left, the search-tooltip-arrow is not on its best position.

    • This reply was modified 6 years, 11 months ago by Micha66.
    January 17, 2018 at 5:44 am #898290
    Ismael

    Hi,

    Yes, that’s possible. Just add this css code.

    .responsive #top .main_menu .menu .av-burger-menu-main {
    float: right;
    position: relative;
    z-index: 20;
    margin-right: 0 !important;
    padding-right: 0 !important;
}

    Adjust the values as needed.

    Best regards,
    Ismael

    January 17, 2018 at 7:44 am #898317
    Micha66

    perfect, thank you!

    January 17, 2018 at 8:07 am #898327
    Ismael

    Hi,

    Glad we could help. Please feel free to open a new thread if you need anything else. :)

    Best regards,
    Ismael

    January 17, 2018 at 8:07 am #898329
    Ismael

    Hi,

    Glad we could help. Please feel free to open a new thread if you need anything else. :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.