Tagged: header
-
AuthorPosts
-
June 6, 2015 at 12:03 am #455354
Hello, my site is golfcoursefertilizer.mariaconsuelo.com. I would like to place a large phone number in green text in the same header as the logo but on the right. The extra element area for Tel” is too small.
I added some PHP to add a header widget but it placed my phone number below my menu. Need it at the same level as my logo. thanks
June 8, 2015 at 5:55 am #455714Hey TAYLORTOWN01!
I couldn’t see a header widget on the page you linked, did you remove it? We need to inspect the element in order to give you custom CSS for the placing of it.
Cheers!
RikardJune 8, 2015 at 9:06 pm #456328Hi there, I put the header widget back in. I would like the tel# to be about 24px and the color is #009900. Also click to call on mobile devices. thank you very much.
June 9, 2015 at 7:47 am #456482Hey!
Please add this to the content of the widget and select to not show the widget title:
<a href="tel:+18665592527"><h3 style="font-size: 24px !important; color: #009900 !important;">(866) 559-2527</h3></a>
Best regards,
Rikard- This reply was modified 9 years, 5 months ago by Rikard.
June 9, 2015 at 1:29 pm #456678Looks good, how do I get the phone number above the nav menu on the same level as logo
June 9, 2015 at 2:05 pm #456702June 9, 2015 at 2:13 pm #456707June 9, 2015 at 2:17 pm #456713Hi!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
#header .widget { top: -125px; left: 80%; margin-bottom: -95px; }
Best regards,
YigitJune 9, 2015 at 2:29 pm #456725Thanks so much. One last request.
Is it possible of the last menu item on the nav bar to have a different color ( like dark green) I’m talking about the “get a free sample” buttonJune 9, 2015 at 2:37 pm #456730Hey!
Please add following code to Quick CSS as well
li#menu-item-3340 a .avia-menu-text { color: darkgreen; }
Regards,
YigitJune 9, 2015 at 2:52 pm #456739This reply has been marked as private.June 9, 2015 at 3:23 pm #456753Hi!
Please use following code instead
li#menu-item-3340 a .avia-menu-text { color: white; } li#menu-item-3340 { background-color: darkgreen; }
Regards,
YigitJune 15, 2015 at 8:50 pm #459654One other question. I have my phone number displayed in the header widget but it is not displaying on the mobile phone. Is there a way I can get the tel# to display between the logo and the mobile menu.
site is golfcoursefertilizer.mariaconsuelo.com
June 15, 2015 at 8:59 pm #459657Hey!
Please add following code to Quick CSS as well
@media only screen and (max-width: 989px) { .html_mobile_menu_tablet .main_menu, .html_mobile_menu_tablet #header_main_alternate { display: block; } #header .widget { top: -90px; left: 20%; }} @media only screen and (max-width: 480px) { header .widget { top: -110px; left: 37%; }}
Regards,
YigitJune 15, 2015 at 9:57 pm #459709How do I insert the widget?
June 15, 2015 at 10:03 pm #459715Hi!
Please refer to this post – http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/
Cheers!
YigitJune 16, 2015 at 6:16 pm #460249Okay, we are getting close. I have the TEL# number centered nicely on the mobile screen. but for some reason it’s not clicking to call on the mobile phone. here is the header widget code: Here is the header widget code. It looks right to me
<h3 style=”font-size: 18px !important; color: #009900 !important;”>(866) 559-2527</h3>
Here are the other style changes we did
#header .widget {
top: -125px;
left: 80%;
margin-bottom: -95px;
}li#menu-item-3340 a .avia-menu-text {
color: white;
}
li#menu-item-3340 {
background-color:green;
}
@media only screen and (max-width: 989px) {
.html_mobile_menu_tablet .main_menu, .html_mobile_menu_tablet #header_main_alternate {
display: block;
}
#header .widget {
top: -90px;
left: 40%;
}}
@media only screen and (max-width: 480px) {
header .widget {
top: -110px;
left: 37%;
}}The Tel# links fine down on the page. just not in the header.
June 17, 2015 at 2:16 pm #460779 -
AuthorPosts
- You must be logged in to reply to this topic.