Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1272481

    Hi,

    I’m trying to figure out a way to add a phone number to the right of my menu where the social icons normally appear. I followed another post on the subject, added the script to functions.php and created a header widget plus added CSS but not getting the results I need.

    Ideally, the phone number should be on one line and appear on desktop, tablet and mobile. Any help greatly appreciated.

    Thanks
    Derek

    • This topic was modified 3 years, 10 months ago by retray.
    #1272588

    Hey retray,

    Maybe you could try this, add a widget area to the header and you could then add the phone number there: http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/

    Best regards,
    Jordan Shannon

    #1272697

    Hi Jordan,

    Thanks. That’s exactly what I’ve done, followed that documentation, but I’m not getting the phone number to appear how I want. I’ve mocked up what I want it to look like here: https://www.avidcreative.co.uk/njl/header-example/header-with-number.jpg

    So it’s really a case of replacing the position of the social icons with the phone number. Perhaps this is not possible with Enfold?

    Kind regards,
    Derek

    #1273291

    Hi,

    Thank you for the update.

    Have you tried using the ava_inside_main_menu hook instead of the one from the documentation? This should directly place the phone number or widget inside the main menu container. You may need to use additional css modifications to adjust the position of the menu and the phone number

    Best regards,
    Ismael

    #1273324

    Hi Ismael,

    Thanks, that’s almost worked. Only thing I can’t figure out now is the css to adjust the position of the menu and so the phone number appears on a single line as in https://www.avidcreative.co.uk/njl/header-example/header-with-number.jpg. I’m currently using this in my quick css:

    #header .widget {
    left: 100%;
    padding-top: 18px;
    position: absolute;
    z-index: 999;
    }
    Thanks for your help.
    Derek

    #1273432

    Hi Derek,

    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 (min-width:1024px){
         .av-main-nav-wrap {
             margin-right: 50px;
         }
         #top #custom_html-2 {
             min-width: 180px;
             margin-top: 18px;
        }
        .header-scrolled-full  #custom_html-2,
        .header-scrolled #custom_html-2  {
             margin-top: 0px;
             padding-top: 0;
        }
     }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1273705

    Hi Victoria,

    Thanks. I put this code in quick css and it’s very close now but as soon as the screen goes below 1366 wide the phone number starts to disappear and eventually ‘double stacks’ again when it goes to mobile view (see link in private content). Are there any other settings to get round this?

    Thanks,
    Derek

    #1274132

    Hi Derek,

    Please try this code instead:

    
     @media only screen and (min-width:1024px){
         .av-main-nav-wrap {
             margin-right: 150px;
         }
         #top #custom_html-2 {
             min-width: 180px;
             margin-top: 18px;
             right: -40px;
        }
        .header-scrolled-full  #custom_html-2,
        .header-scrolled #custom_html-2  {
             margin-top: 0px;
             padding-top: 0;
        }
     }
    

    Best regards,
    Victoria

    #1274141

    Hi Victoria,

    Thanks but this still does not work. The menu has moved over to the left but the phone number remains stuck in the same place and is only fully visible at 1366 width – https://www.avidcreative.co.uk/njl/

    I really need to get this done now so any more suggestions greatly appreciated.

    Thanks.
    Derek

    #1274201

    Hi Derek,

    I adjusted the code for you and cleared the merged files. Please check now.

    Best regards,
    Victoria

    #1274354

    Hi Victoria,

    Looks good thanks. You can close this now.

    Kind regards,
    Derek

    #1274369

    Hi Derek,

    We’re glad to hear that :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Add phone number to right of menu in place of social icons’ is closed to new replies.