Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • August 5, 2017 at 12:08 am #834528
    mcraig77

    Ahoy,

    I’m trying to make my menu like the attached screenshot.

    Please Advise how to setup,

    August 6, 2017 at 8:02 am #834961
    Rikard

    Hey mcraig77,

    Did you try to set the menu items to Button Style under Appearance->Menus?

    Best regards,
    Rikard

    August 6, 2017 at 8:19 pm #835109
    mcraig77

    Hi Rikaed,

    Not only do I need those to button menu items but I also need the menu (non button area) centered and logo more left like the screenshot. What is the best way about going about this?

    August 6, 2017 at 11:12 pm #835147
    Nikko

    Hi,

    The best way would be to use a child theme create a separate menu for the buttons and tweak with css however this would take a lot of time to do, I would suggest to use a single menu set the last 2 menu items to buttons then add a left margin to the signup menu (button).

    Best regards,
    Nikko

    August 7, 2017 at 3:12 am #835178
    mcraig77

    Ok… How would I do this once the child theme is created…

    First off how do I center the menu? next how would I add those buttons to the right area?

    Please advise,

    August 7, 2017 at 3:33 pm #835413
    Rikard

    Hi,

    Maybe you could add the additional content you need to a header widget? http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/

    Best regards,
    Rikard

    August 7, 2017 at 8:52 pm #835595
    mcraig77

    I went ahead and followed those instructions and things don’t really work . The buttons are not side by side and are not in the header…. I also need the first button to be a light transparent with this color box #787878

    Please Advise:

    Here is the widget code I added

    [av_button label='Sign Up' link='manually,http://www.test.com' link_target='' size='medium' position='center' icon_select='no' icon='ue800' font='entypo-fontello' color='light' custom_bg='#444444' custom_font='#ffffff' admin_preview_bg=''] [av_button label='Login' link='manually,http://www.test.com' link_target='' size='medium' position='center' icon_select='no' icon='ue800' font='entypo-fontello' color='custom' custom_bg='#d5202d' custom_font='#ffffff' admin_preview_bg='']

    Here is the quick css
    #header .widget {
    left: 50%;
    padding-top: 0;
    position: absolute;
    top: 0;
    transform: translate(-50%);
    z-index: 999;
    }

    August 7, 2017 at 11:24 pm #835630
    Nikko

    Hi,

    Try adding this css code in Quick CSS (located in Enfold > General Styling):

    #header .main_menu {
    right: 50%;
    margin-right: -250px;
}

#header .widget {
    width: 185px;
    left: auto;
    right: 0;
}

#header .widget .avia-button-wrap {
    float: left;
    display: block;
    clear: none;
}

    Hope this helps.

    Best regards,
    Nikko

    August 7, 2017 at 11:28 pm #835633
    mcraig77

    A couple of things:

    There does not seem any space between the buttons, how do I fix this? Screenshot 1 Also how do I canter the menu between the logo (left) and buttons (right) Screenshot 2. When I shrink the menu the buttons and menu overlap the logo. How do I make it do the mobile menu kicks in sooner? and how do I add these items the mobile menu but not show up in the desktop menu.

    Sorry for all the questions, this should be it if answered in full

    August 12, 2017 at 6:39 am #837748
    Nikko

    Hi,

    Please replace this code I gave:

    #header .widget {
    width: 185px;
    left: auto;
    right: 0;
}

#header .widget .avia-button-wrap {
    float: left;
    display: block;
    clear: none;
}

    to:

    #header .widget {
    width: 200px;
    left: auto;
    right: 0;
}

#header .widget .avia-button-wrap {
    float: left;
    display: block;
    clear: none;
    margin-left: 10px;
}

    As for making the mobile menu appear sooner try adding this css code:

    @media only screen and max-width(1200px) {
  #avia-menu li.menu-item {
    display: none;
  }

  #avia-menu li.av-burger-menu-main {
    display: block;
  }
}

    Let us know if this helps :)

    Best regards,
    Nikko

    August 12, 2017 at 7:55 pm #837999
    mcraig77

    Thanks, That seems to fix the button gap but there are still a couple of issues Iicluding:

    1. No mobile menu comes up- Also I need to add those 2 buttons to mobile menu somehow without showing up on the desktop menu.
    2. The 2 buttons on the right overlap things I need them to disappear when the menu jumps to mobile.
    3. Things are still overlapping. They are not jumping to mobile sooner

    Please Advise.

    August 14, 2017 at 12:19 pm #838596
    Victoria

    Hi mcraig77,

    There is no room for those buttons on mobile, you need to come up with a different solution.
    Put them blew the logo or somewhere else. This code hides them for now.
    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

    
@media only screen and (max-width: 475px) {
  #text-6 {
    display: none;
  }
  .responsive .logo img {
    width: 80%;
  }
}

@media only screen and (max-width: 767px) {
  #header .main_menu {
    right: 0;
    margin-right: 0;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

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