Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 14, 2019 at 3:53 pm #1067012
    vinayb

    Hi there, how can i achieve a menu alignment like this? is there a quick solution in ENFOLD? https://www.screencast.com/t/tfxe4idtY5

    If you see the last navigation item we used as button which we want to float on the right side. Please suggest.

    February 14, 2019 at 10:45 pm #1067202
    Jordan Shannon

    Hey vinayb,

    Perhaps you can try a “tab” plugin or try adding a widget to the header then add, style, and position the link to where you need it. https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area

    Best regards,
    Jordan Shannon

    February 15, 2019 at 6:54 pm #1067519
    vinayb

    Yes we tried. For example https://kriesi.at/documentation/enfold/example-of-logo-left-widgets-right-menu-below/
    but this does not expand the menu bar to far left and right. can you help? this is where we are trying to implement your solution http://lyraintel.wpengine.com/ (hosted on WPengine)

    February 17, 2019 at 8:34 pm #1067986
    Victoria

    Hi vinayb,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
.container.av-logo-container {
  padding: 0;
}
div .logo {
  padding-left: 15px;
}
.av-main-nav li {
  min-width: 15vw;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    February 18, 2019 at 2:25 pm #1068368
    vinayb

    Hi there, thanks for replying.

    basically we are trying to achieve this header layout https://www.screencast.com/t/XYUDwrcC8X using Logo Left and Menu Below with widget on the right. I searched almost all documentation and could not find the appropriate setting. Can you guide me what i need to do to achieve this header layout? thanks in advance.

    February 21, 2019 at 10:50 am #1069866
    Ismael

    Hi,

    Thanks for the update.

    You have to set the menu container width to 100% or have it inherit the width of the header container. After that, you can separate the “Schedule a Demo” menu item away from the rest by setting its position relative to the menu container. You can start with this css code:

    .av-main-nav-wrap {
    width: 100%;
}

.av-main-nav .visual-demo-btn {
    width: auto;
    right: 0;
    position: absolute;
}

    Best regards,
    Ismael

    February 21, 2019 at 1:09 pm #1069919
    vinayb

    thank you so much for the reply. I think it works well.

    a couple of more questions. it appear like this in small devices https://www.screencast.com/t/UPehGxPTQ

    1. can we have a full width nav bar in mobiles?
    2. can we have the search icon open the search field like in a normal nav bar search bar?
    3. how can we align the icons better with smaller devices? currently you can see the icons looks messed up.

    thank you so much in advance. i appreciate your support.

    February 22, 2019 at 5:35 am #1070215
    Ismael

    Hi,

    Thanks for the update.

    How did you adjust those elements? Try to wrap the css modification inside a desktop media query so that it doesn’t affect the default mobile view layout.

    @media only screen and (min-width: 989px) {
  /* styles here */
}

    Best regards,
    Ismael

    February 22, 2019 at 2:13 pm #1070331
    vinayb

    2. can we have the search icon open the ajax type search field like in a default Enfold nav bar search bar?

    February 25, 2019 at 11:07 am #1071218
    Ismael

    Hi,

    Thanks for the update.

    Remove the widget with the search icon and then add this code in the functions.php file to render the actual search icon inside the main header container.

    add_action( 'ava_main_header', 'avia_append_search_nav_mod', 9997 );

function avia_append_search_nav_mod()
{	
    $search = '';

    global $avia_config;
    ob_start();
    get_search_form();
    $form =  htmlspecialchars(ob_get_clean()) ;

    $search .= '<div id="menu-item-search" class="noMobile">
                    <a href="?s=" rel="nofollow" data-avia-search-tooltip="'.$form.'" '.av_icon_string('search').'><span class="avia_hidden_link_text">'.__('Search','avia_framework').'</span></a>
                </div>';

    echo $search;
}

    Best regards,
    Ismael

    February 25, 2019 at 2:13 pm #1071285
    vinayb

    thanks for the reply. however, i can i add the search icon on the right side of the logo including other items like Phone icon and Sign In text etc? Please suggest.

    March 1, 2019 at 2:34 am #1072809
    Ismael

    Hi,

    Use the “menu-item-search” id selector to adjust the icon’s position.

    #menu-item-search {
  position: absolute;
  right: 0;
  top: 20px;
}

    Best regards,
    Ismael

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