Tagged: ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • March 24, 2020 at 2:59 pm #1196400
    willevo311

    Hi Everyone,

    I am hoping someone can help me out with this one.. I found a website that has a header/menu area that I like and have been playing with Enfold for a while to replicate it but can’t figure it out. Any help would be greatly appreciated!! I really like that the phone number and button are located in the main menu area.

    The website is https://myershomebuyers.com/
    Specifically, I like (and trying to create in Enfold) the styling of the phone number, links to the phone number and has an icon next to it. And then after that the button (and styling of button) that takes you to the contact form on the same page.

    Thanks for any help you guys can provide!! Have a great day!

    Thanks,
    Will

    March 24, 2020 at 5:26 pm #1196918
    Victoria

    Hey willevo311,

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    March 24, 2020 at 6:07 pm #1196949
    willevo311

    Here is what I was thinking: https://i.imgur.com/imfWSld.png

    Small square logo – menu – phone number with icon – button (hover state) that links to contact form on same page..

    Not sure where to begin on this one. Any help would be appreciated!!

    Thanks,
    Will

    March 25, 2020 at 7:05 am #1197581
    Rikard

    Hi Will,

    Thanks for that. You can try to add a widget to the header: https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area. Then you can add the content you want in there in a new layout on a page, then you can try to copy the shortcode of your layout to the widget. In order to see shortcodes from the layout builder, you need to enable debug mode first: https://kriesi.at/documentation/enfold/intro-to-advanced-layout-builder/#debug-mode

    Best regards,
    Rikard

    March 26, 2020 at 3:02 pm #1198060
    willevo311

    Hi Rikard and/or any mod that sees this,

    I went through the tutorial you suggested to add the widgets and was able to add to test widgets to the menu area. (“You can try to add a widget to the header: https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area”) Following the tutorial creates a styling issue between the header area and the start of the main content. It pushes the main content into the header and menu area so there is a weird overlap. Also, when following the tutorial it also adds the widget area to mobile instead of just the hamburger menu.. Thinking about a workaround.. I could create a mobile only menu that adds the widget info as custom links to show that info BUT is there a way to only display the logo and hamburger menu for mobile? Basically remove widget area for any size that requires the hamburger menu?

    Here is image of styling issue on desktop: https://imgur.com/a/B8AIXZZ
    I went through the tutorial twice to double check myself and couldn’t find the issue.. would you mind taking a look? I am adding login creds so you can investigate if needed.

    Thanks so much for your help. I appreciate it.
    Respectfully,
    Will

    March 27, 2020 at 6:37 am #1198233
    Rikard

    Hi Will,

    The overlapping is caused by this CSS which you have in Quick CSS:

    .html_header_sticky.html_header_transparency #top #wrap_all #header,
.html_header_sticky #top #wrap_all #header { 
    position: fixed; 
}

    You can hide the widget when the mobile menu activates using this CSS:

    @media only screen and (max-width: 990px) {
#text-2 {
    display: none; 
}
}

    Best regards,
    Rikard

    March 27, 2020 at 7:41 pm #1198408
    willevo311

    Thanks for the info.. One last question to clear up for this one.. (And a huge thank you for guiding me on this.. Could not have done this without you.. I appreciate it!)

    I entered debug mode and created a button and captured shortcode..

    Shortcode for button: [av_button label='GET OFFER' icon_select='no' icon='ue800' font='entypo-fontello' size='small' position='center' label_display='' title_attr='' color='dark' custom_bg='#1b4074' custom_font='#1b4074' link='manually,http://' link_target='' id='' custom_class='' av_uid='av-k8ag0jq2' admin_preview_bg='']

    I need to set the button to link to a section on the page.

    Specifically this section (pulled from the css name): .home #av_section_2 .container

    Can you show me where I need to add that to the shortcode so that when a user clicks on the button it will take them to the section in question?

    I really appreciate the help. I have been playing with it and looking at the documentation but haven’t figured it out.

    Thanks! Have a great day!
    Will

    March 28, 2020 at 5:43 am #1198524
    Rikard

    Hi Will,

    Please try to set the link in the element options, if you want to edit the shortcode then you can try this:

    manually,http://your.site/#anchor

    You can’t link to classes like in your example, only ids. For example:

    #av_section_2

    Best regards,
    Rikard

    March 30, 2020 at 11:20 pm #1199209
    burokuran

    Hello Mr.Rikard

    I want to also do this for my website… is this possible for the enfold theme to get the below result?

    https://prnt.sc/rpph86
    can you explain me how can make this?

    thanks a lot for your supports.
    and wish you heath and happines forever

    March 31, 2020 at 1:04 am #1199224
    Jordan Shannon

    Hi,

    I’ve assisted with the above in the thread you started about it. Did you need help with this specific topic or shall we close?
    Best regards,
    Jordan Shannon

    March 31, 2020 at 5:59 pm #1199389
    willevo311
    This reply has been marked as private.
    March 31, 2020 at 6:24 pm #1199408
    Jordan Shannon

    Hi,

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

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Help adding phone number and button in menu’ is closed to new replies.