Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • May 29, 2014 at 7:22 pm #271953
    aasaes

    Hi,
    Is it possible to add our phone number between the logo and the menu in the header.Any assistance is greatly appreciated and the more basic the instructions the better.screen shot
    Thanks

    May 29, 2014 at 7:33 pm #271957
    Yigit

    Hey aasaes!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab and adjust as needed

    div.phone-info {
position: relative;
top: 35px;
left: 10%;
}

    Best regards,
    Yigit

    May 29, 2014 at 7:41 pm #271961
    aasaes

    Thanks, where would I add the actual phone number, size, font, and colour within this code you sent?

    • This reply was modified 10 years, 7 months ago by aasaes.
    May 29, 2014 at 7:44 pm #271965
    Yigit

    Hey!

    Please go to Enfold theme options > Header Layout > Extra Elements > Phone Number or small info text and add your phone number. Then go to Enfold theme options > Advanced Styling > Small bar above Main Menu to change its color

    Cheers!
    Yigit

    May 29, 2014 at 7:51 pm #271969
    aasaes

    Thank you. Can we make the phone number font larger?

    May 29, 2014 at 7:55 pm #271970
    Yigit

    Hey!

    Sure, please add following code to Quick CSS as well and adjust as needed

    .phone-info span { font-size: 18px; }

    Best regards,
    Yigit

    May 29, 2014 at 8:36 pm #272002
    aasaes

    Brilliant thank you!

    May 29, 2014 at 8:50 pm #272010
    Yigit

    Hi!

    You are welcome, glad we could help! :)

    Best regards,
    Yigit

    June 30, 2014 at 5:44 pm #285312
    aasaes

    Yigit,

    Now that the website is live, I will be the one updating the information on it moving forward. So, I apologize if I ask you a question that you have already responded to. Specifically, (during this topic) our web builders added a phone number to the header. Now, when we view the site on mobile devices, the phone number overlaps the menu icon. How can we go about fixing this. Please keep in mind, my skill level is verrry low.

    Thanks,

    Travis

    June 30, 2014 at 7:38 pm #285345
    Yigit

    Hey Travis!

    Can you please post the link to your website so we can inspect elements on it to provide you accurate custom CSS code to fix the issue?

    Cheers!
    Yigit

    June 30, 2014 at 7:47 pm #285349
    aasaes

    Sure,
    http://www.smallanimalemergency.com

    tw

    June 30, 2014 at 7:51 pm #285353
    Yigit

    Hey!

    You can decrease the font size of phone number on mobile by adding following code to Quick CSS field in Enfold theme options under General Styling tab

    @media only screen and (max-width: 480px) {
.phone-info span {
font-size: 18px;
}}

    Cheers!
    Yigit

    June 30, 2014 at 7:56 pm #285356
    aasaes

    Ah! Perfect! Thank you sooo much! I do have another question though, how do I start a new topic on here? I know I must just be overlooking it, but I can’t seem to find how to do that.

    June 30, 2014 at 8:03 pm #285363
    Yigit

    Hi!

    Not at all Travis, we are always glad to help! :)
    You can go to Enfold forum and scroll down to start a new topic or simply you can use this link – https://kriesi.at/support/forum/enfold/#new-topic-0

    Best regards,
    Yigit

    July 1, 2014 at 12:47 am #285482
    ewingmh

    Gravity Forms

    I’ve tried creating this same effect – except for a centered logo (to show the phone number on the left).
    I added this:
    div.phone-info {
    left: 0;
    position: relative;
    top: 85px;
    }
    .phone-info span { font-size: 24px;
    color: #ffffff; }

    @media only screen and (max-width: 480px) {
    .phone-info span {
    font-size: 18px;
    }}

    #header_meta {
    height:0px;
    min-height: 0;
    }

    How do I completely remove the top line since it is not needed? “header_meta”
    I tried display:none – but that gets rid of the phone number too that I just added.

    For now I moved it all back to the top bar being that with the shrinking logo it ends up on top of the menu. Ideally I want the Phone Number to the left of the logo that will respond appropriately when the logo shrinks upon scrolling – and the facebook icon to the right of the logo.

    Thanks!

    • This reply was modified 10 years, 5 months ago by ewingmh.
    July 1, 2014 at 5:03 am #285544
    Ismael

    Hi!

    Thank you for using the theme.

    I checked the site Gravity Forms, it loads fine this time but it’s not using Enfold. Try to add this on Quick CSS to hide the header_meta container:

    #header_meta .container {
min-height: 0;
height: 1px;
margin-top: -1px;
}

    Best regards,
    Ismael

    July 1, 2014 at 5:49 pm #285818
    ewingmh

    If I use that code how can I get the phone and facebook icon to adjust appropriately when the user scrolls down with the shrinking logo? DNS issues are resolved. Gravity Forms

    July 1, 2014 at 6:27 pm #285832
    Yigit

    Hi!

    Please try adding following code to Quick CSS 

    #header_meta .container { position: relative; top: 70px; }
#header_meta { margin-top: -36px; }
.html_header_top.html_header_topbar_active.html_header_sticky.html_large.html_bottom_nav_header #top #main { padding-top: 162px; }

    Regards,
    Yigit

    July 1, 2014 at 7:21 pm #285849
    ewingmh

    I changed it to:
    #header_meta .container { position: relative; top: 50px; }
    #header_meta { margin-top: -36px; }
    .html_header_top.html_header_topbar_active.html_header_sticky.html_large.html_bottom_nav_header #top #main { padding-top: 162px; }

    So that it won’t overlap the menu on shrinking the logo – but it would look better if it was centered when the logo was big and when the logo shrinks… is that possible?

    Thanks for the help!

    July 1, 2014 at 7:34 pm #285862
    Yigit

    Hi!

    I am not sure if i understood it clearly. Can you post a screenshot and show how you would like it to look before and after header resizing?

    Best regards,
    Yigit

    July 2, 2014 at 12:38 am #285962
    ewingmh

    i figured it out – I decided I liked the alignment the way it was and then I added this for mobile devices – :

    @media only screen and (min-width: 320px) and (max-width: 480px) {
    #header_meta .container { position: relative; top: 1px; }
    #header_meta { margin-top: 0px; }
    .html_header_top.html_header_topbar_active.html_header_sticky.html_large.html_bottom_nav_header #top #main { padding-top: 162px;
    }
    }

    • This reply was modified 10 years, 5 months ago by ewingmh.
    July 2, 2014 at 7:08 am #286058
    Ismael

    Hey!

    Glad you figured it out. If you still have questions, let us know.

    Cheers!
    Ismael

  • Author
    Posts
Viewing 22 posts - 1 through 22 (of 22 total)
  • The topic ‘Add phone number between logo and menu in header’ is closed to new replies.