Tagged: header widget
-
AuthorPosts
-
September 20, 2019 at 7:58 am #1140130
hello I have 3 questions/issues (details, logins, URLs in private)
1) Header Widget Styling (see private)
I would like to make phone icon, phone number and address (located in top right corner) as on this website (see private)2) Background Image Position (see private)
I would like to make background image on this page to be positioned to the top and resized correctly3) Also how do i hide header widget on the mobile?
Screenshot
- This topic was modified 5 years, 2 months ago by anristudio.
September 21, 2019 at 7:54 am #1140410Hey onastvar,
Thank you for contacting us.
Please open different tickets for unrelated issues. It will avoid confusion.
1. Add the below CSS to Enfold > General Styling > Quick CSS
#header .textwidget strong { font-size: 32px; line-height: 1.5em; } #header .textwidget { font-size: 12px; line-height: 1.2em; }
2. Please use a color section element and set a background image that suits your design style.
3. To hide the header widget on the phone:
@media only screen and (max-width: 480px) { #header .textwidget { display:none; } }
Best regards,
VinayNovember 13, 2019 at 10:34 pm #1156548Three questions/issues below about header widget.
I have it working correctly on Desktop PC/MAC and iPhone1) iPhone has minor issue how do I align logo in the middle?
i have smaller version of logo for mobile version)2) I would like to make LOGO, PHONE ICON & PHONE NUMBER & ADDRESS
(located in top right corner) display on iPad. Can original logo be used or I need
to create another version of LOGO for iPad?3) Also, regarding same header widget (LOGO, PHONE ICON & PHONE NUMBER & ADDRESS)
how do I adjust space between PHONE NUMBER and ADDRESS? (Please see live URL below)Please if possible assist with CSS for iPad.
New login credentials and URL in private below.
- This reply was modified 5 years ago by anristudio.
November 21, 2019 at 5:28 pm #1158856Hey!
Sorry for the late reply, I have changed the structure of the widget text a bit so we can target it using CSS and add the below CSS to your child theme style sheet which can be accessed from Appearance > Editor > Child theme > Styles.css
There is not enough space on the tablet device to add the address and it will overlap the logo. Please take a look at the site and let us know if you have any questions.
/* Logo and widget */ #top #header .widget .wp-img { margin: 0 10px 0 0; } #top #header .widget .widget-title { font-size: 3em; font-weight: bolder; } #top #header .widget h2 { margin-top: -10px; line-height: 1.5em; } #top #header .widget { position: absolute; max-width: 300px; right: 0; text-align: right; transform: scale(.75); } #top #header .logo { display: flex; width: 65%; padding-right: 20px; } #top .logo a, #top .logo a img { align-items: center; justify-content: start; }
Best regards,
VinayNovember 23, 2019 at 9:33 pm #1159512Thank you Vinay.
Just one small issue, address below the phone number has 210 on second line, should be on 1st line after SUITE. How to adjust that?November 24, 2019 at 4:27 pm #1159605Hey!
I have adjusted the address as per your request. If you like to make further changes please feel free to play with the widget text in Appearance > Widget > Header
You can control the widget width by adjusting the max-width property in Appearance > Editor > Child theme > styles.css
#top #header .widget { max-width: 350px; }
Regards,
VinayNovember 24, 2019 at 5:36 pm #1159615Vinay Thank you so much!
November 24, 2019 at 8:17 pm #1159657Hi onastvar,
Glad we could help :)
If you need further assistance please let us know.
Best regards,
Victoria -
AuthorPosts
- You must be logged in to reply to this topic.