Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 14, 2021 at 5:40 pm #1272481
    retray

    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.
    January 15, 2021 at 7:06 am #1272588
    Jordan Shannon

    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

    January 15, 2021 at 12:57 pm #1272697
    retray

    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

    January 18, 2021 at 11:14 am #1273291
    Ismael

    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

    January 18, 2021 at 1:05 pm #1273324
    retray

    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

    January 18, 2021 at 7:44 pm #1273432
    Victoria

    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

    January 19, 2021 at 1:45 pm #1273705
    retray

    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

    January 20, 2021 at 5:48 pm #1274132
    Victoria

    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

    January 20, 2021 at 6:04 pm #1274141
    retray

    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

    January 20, 2021 at 8:43 pm #1274201
    Victoria

    Hi Derek,

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

    Best regards,
    Victoria

    January 21, 2021 at 12:40 pm #1274354
    retray

    Hi Victoria,

    Looks good thanks. You can close this now.

    Kind regards,
    Derek

    January 21, 2021 at 1:41 pm #1274369
    Nikko

    Hi Derek,

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

    Best regards,
    Nikko

  • Author
    Posts
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.