-
Posts
-
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.
ThanksHey 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,
YigitHey!
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!
YigitHey!
Sure, please add following code to Quick CSS as well and adjust as needed
.phone-info span { font-size: 18px; }Best regards,
YigitYigit,
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
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!
YigitSure,
http://www.smallanimalemergency.comtw
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!
YigitAh! 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.
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-0Best regards,
YigitI’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!
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,
IsmaelIf 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
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,
YigitI 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!
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,
Yigiti 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;
}
}
- The topic ‘Add phone number between logo and menu in header’ is closed to new replies.