-
Posts
-
I have already added a widget area to my header in order to add some text.
I have moved the social icons up via
#header_main .social_bookmarks { top: 10%; }I now want to add a phone number and email address to the right of the header area under the social icons (but not in the top bar). I tried adding a second widget area to the header but this didn’t work, I got an error saying I couldn’t use enfold_customization_header_widget_area again.
So via Header Extra Elements I have added my text and then moved it down via
.phone-info { position: relative; top: 150px; font-size: 16px; text-align: right; }However, #header_meta is still active and whilst I’ve got my phone number where I want it, .container under the #header_meta is 60px high because of the phone text (but with nothing in it) and this element is pushing everything else down. I have tried things like
#header_meta .container { max-height: 0px; }but no luck.
Is there any way to:
1. Stop #header_meta .container displaying, or switch it ‘off’, whilst keeping .phone-info active? i.e. do something I’ve not tried CSS-wise to #header_meta .container to get rid of it?
2. Add another header widget?Or could I add some code such as a <div> for my phone text inside <div id=”header”> by editing header.php (or another theme file)?
Hi zimbo!
Just add it to the header widget area and take a screenshot highlighting where you want it to display and we’ll give you some CSS to move it around. We can move it separately from the other widgets.
We’ll need a link to your page as well.
Cheers!
ElliottHi Elliott,
You know what, I’d just thought about doing it that way an hour so ago!
I’m new to Enfold – how do I upload a screenshot? I can’t see an upload link anywhere.
Hi!
You can upload your screenshot on imgur.com or Dropbox public folder and post the links here.
Cheers!
YigitOK, thanks. Screenshot: http://imgur.com/OjX1W1b
Website: dev.jacksgallery.co.uk (NOT www)As you can see I’ve managed to add the contact info into the header widget and it’s nearly OK on a 24″ screen (but not quite right) plus it all screws up as soon as the screen size reduces – so I could do with some help please for some CSS that:
– always keeps the Jack’s Gallery text centered
– keeps the contact info always to the rightIf you can get me ‘on the track’ I can then work out some media queries as screen size reduces to reduce font sizes and maybe turn off the blocks at some point (assuming the blocks won’t be able to ‘stack’ under the logo).
Max container width is 1360px.
Code inside the header is:<div class="hdr-titles"> <h4>Jack's Gallery</h4> <h5>Jack Vettriano Artist's Proofs and Limited Edition Prints</h5> </div> <div class="hdr-contact"> <p class="hdr-contact-txt">Gallery: 01491 571387</p> <p class="hdr-contact-txt">Mobile: 07775 735136</p> <p class="hdr-contact-txt">Email: <a href="mailto: (Email address hidden if logged out) "> (Email address hidden if logged out) </a></p> </div>Child theme CSS is:`
/* header widget */
#header .widget {
left: 60%;
top: 50px;
position: absolute;
transform: translate(-53%);
z-index: 999;
width: 50%;}.hdr-titles {
float: left;
position: relative;
text-align: center;
padding-top: 6px;}.hdr-contact {
float: right;
position: relative;
text-align: right;}.hdr-contact-txt {
font-size: 16px;
margin: 0.25em 0;}`Hey!
Switch your code to this.
#header .widget { position: absolute; top: 0; left: 0; width: 100%; } .hdr-titles { float: none; left: 50%; transform: translate(-50%); width: auto !important; } .hdr-contact { float: none; position: absolute; right: 20px; text-align: right; top: 50px; }Regards,
ElliottHi!
The Jack’s Gallery text seems to be centered for me. I am on Mac 13” and for my screen size you can use this code:
.hdr-contact { right: -196px; top: -113px; }You might need to use media queries to adjust for differente screen sizes.
Best regards,
AndyHi Elliott,
That didn’t work. See the result here:
However, for hdr-titles, if I switch off the transform element in Chrome developer tools it seems to work – do you agree?
But I can’t get hdr-contact to work. Just to clarify I’d like it positioned similar to this: which is about right:400px but a fixed value doesn’t work for different screen sizes. Can you suggest something else?
Zimbo
Hey!
can you show us how do you want it to look like on mobile device? please send us a mockup/screenshot, so we can provide you some precise CSS code.
Best regards,
AndyHi,
Take this as the starting point on a normal PC screen: http://imgur.com/OjX1W1b (the contact info is not quite right-aligned under/with the Facebook icon in this image, but that’s where I want it).
As the screen size reduces I would use a sequence of @media screen and (max-width: 989px) statements at various max-widths to progressively reduce the font-size of h4 (Jack’s Gallery), h5 (Jack Vettirano…) and .hdr-contact-txt (contact info) so that both text boxes stayed at the same line/level in the header for as long as possible.
I’ve added a padding-top:50px to hdr-titles of Elliott’s CSS (and as #484650, the transform would be removed although I’ve left it live for now). At some screen size I would then reduce this padding-top to shift that box up and bring hdr-contact underneath it e.g. http://imgur.com/8KuzsbK. The hdr-contact CSS for this would be
float: none;
left: 50%;
text-align: center;
top: 100px;I usually design down to a 320px screen so I’d continue to reduce font size as needed with both boxes ‘stacked’ as per the second image, perhaps having to switch one off at some point. So when the boxes are stacked, I think I’ve got CSS for that.
What I need help with please is:
1. CSS for hdr-contact to get it right aligned under the Facebook icon on normal screens, and to keep it in that position as screen sizes reduce to about 1200px, which is where I think I’ll have to do the first font size reduction.
2. Keep hdr-contact in that right-aligned position until I do the ‘stacking’ (my guess is there’s no change from #1)
Hope that’s clear… :-)
Hi!
sounds very complicated and normally I would say this would be considered as custom work, wich needs to be done by a freelance developer.
1.) However, try this to align it under your facebook icon:
.hdr-contact { position: relative; top: -100px; left: -65px; }2.) Not sure what you mean with “stacking” and if you mean you want to center your hdr-contact text at one point (media queries) then add this code into it:
.hdr-contact { text-align: center; }Regards,
Andy
- You must be logged in to reply to this topic.