-
AuthorPosts
-
August 23, 2017 at 9:44 pm #843285
Site Here: http://scottstillsonlaw.com/newsite/
Hi: I have created a header widget to add Call Today and Phone Number, top right, in header, above the menu. Problem is three-fold:
1) Would like some space, a margin, below the header widget and above the menu – they are too close together. Would ideally like to move the menu down, so the bottom of the menu is in line with the bottom of the logo. Would really love to move both down a bit, the widget and the menu, with more space between the two – so the spacing looks vertically centered with the right amount of whitespace.
2) It also appears that the header widget is interfering with the functionality of the Menu – because when you are immediately under the widget, those menu items do not work.
Here’s the css I’ve used to get the header widget in that position above the menu, and maybe it’s wrong
#header .widget {
left: auto;
right: 10px;
padding-top: 0;
margin-top: -60px;
position: absolute;
top: 0;
transform: translate(-0%);
z-index: 999999;
}3) Header Widget doesn’t show up on cell phones – probably because of my negative margin; I’m sure I’ve done this all wrong to get it’s placement where I want it – looked all around your forum though before I reached out, so I know this is a common request, I’m just messing it up!
Thank you!
- This topic was modified 7 years, 1 month ago by Eleina_Shinn.
August 24, 2017 at 6:33 am #843355Hey Eleina_Shinn,
Thank you for writing in!
I have tried to access your dashboard, but the above credentials are wrong.
Best regards,
John TorvikAugust 24, 2017 at 5:35 pm #843612I’m so sorry, try this…
August 28, 2017 at 8:17 pm #845004Hey, I still haven’t heard from you guys, which is very unusual…. so I’m sending login credentials again.
Please let me know if you’ve had a chance to take a look at this, as I am anxious to resolve.
August 29, 2017 at 4:40 am #845158Hi,
Thank you for the info.
Please add the following css code to adjust the menu items.
.av_seperator_small_border .av-main-nav > li > a > .avia-menu-text { top: 40px; position: relative; }
Replace the widget css modification with the following.
#header .widget { position: absolute; left: auto; right: 10px; top: -30px; transform: translate(-0%); padding-top: 0; height: auto; z-index: 0; }
On mobile, maybe you should hide the widget and use theme’s top header.
@media only screen and (min-width: 768px) { #header #header_meta { display: none !important } } @media only screen and (max-width: 767px) { #header .widget { display: none !important } }
Best regards,
IsmaelAugust 29, 2017 at 6:25 pm #845405Okay, the Header looks perfect now, thank you soooooo much!! (and now I know how to do this for other sites, so thrilled)
And, it’s great that it is removed for mobile, but how to add the Top Bar only for mobile devices ( which would be perfect) ?
I did try adding phone number to extra elements in header to see what would happen and it ended up placing space below the menu, was weird, so I removed it. So How to use the Top Bar only for mobile devices, where it would be perfect?
August 30, 2017 at 8:37 am #845680Hi,
And, it’s great that it is removed for mobile, but how to add the Top Bar only for mobile devices ( which would be perfect) ?
We provided the css code above. It will prevent the top header from displaying on desktop view.
#header #header_meta { display: none !important }
Best regards,
IsmaelAugust 31, 2017 at 7:21 pm #846471Hi Ismael:
Unfortunately, this doesn’t work either. I added all of your CSS. Then I added the Phone Number to Theme Options/Header/Extra Elements. The phone number doesn’t show up – the only thing that happens is a space is added (like a top bar amount of space ) under the Main Menu, under the Header, on the Deskcop version (which I don’t want). Nothing on Mobile at all, no top bar, no phone number.
September 1, 2017 at 10:09 am #846762Hi,
You don’t have to add the css code again because it’s inside the css media query already. We corrected the css codes. Please remove browser or hard refresh before checking the page.
Best regards,
IsmaelSeptember 1, 2017 at 6:36 pm #846949Okay, that’s awesome; this also makes Enfold more flexible, gives it a different look and having phone cta large in header – that’s something I’ll do again, so thank you!
One more thing though – as soon as you add the extra element, a space appears below the header, you’ll see it – has border above and below, same color as header. I’ll attach a screen shot – it only appears when you add the phone number in extra element – would love to not have it there.
Here’s a screenshot where I hi-lited the area in red that I am referring to – you’ll notice if you remove the extra element, this goes away too: http://scottstillsonlaw.com/newsite/wp-content/uploads/2017/09/Scott-Stillson-Attorney-at-Law-%E2%80%93-Family-Law-Criminal-Law-Wichita-Falls-Texas.png
September 4, 2017 at 8:43 am #847575 -
AuthorPosts
- You must be logged in to reply to this topic.