-
Posts
-
I am open to a suggestion or two about how to creatively fill the spacing to the left side of the logo which is set obviously to display center. It seems I recall seeing a thread somewhere that alluded to introducing a custom widget to this space (left of logo). I’d obviously want it hidden on mobile but for the larger view-ports I’d love to put something there. Maybe a few fancy icons (white) available in the theme to match the ones to the right of the logo?
I’m happy with the large logo look utilizing a “big header”… that was my intent. Just looking to bring some balance and symmetry to the empty space to the left on larger Viewports (primarily desktop views). Awesome theme, amazing support, and a beautiful community of Enfold users!
Site Is Here: Georgia Web Development
Hey Mark,
Please refer to this post – http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/ and add widget area to your header and then additionally add following code to Quick CSS as well to hide it on screens smaller than 990px
@media only screen and (max-width: 990px) { #header .widget { display: none !important; } }You can enable debugging mode to see shortcodes you have created in pages using Advanced Layout Builder – http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/
Or, You can switch to Default Editor and click on Magic Wand to see full list of shortcodes http://i.imgur.com/n4KXkdm.jpg
then you can create any of them and copy/paste shortcode into any other content element or into text widget.Best regards,
YigitAwesome @Yigit will give it a shot and report back. Thanks so much for the quick response and solution.
So… that’s pretty simple stuff. Thanks. While the obvious css for centered widget is
#header .widget {
left: 50%;
padding-top: 0;
position: absolute;
top: 0;
transform: translate(-50%);
z-index: 999;
}
I’m looking to replicate the same positioning (albeit left side of logo) as the social widget has on the right. The current css for social widget seems to be
.social_bookmarks {
position: absolute;
top: 50%;
margin-top: -15px;
right: 0;
}#top .social_bookmarks {
height: 30px;
z-index: 150;
-webkit-backface-visibility: hidden;
margin: 0 0 0 -9px;
}Can you save me some pain for several trial and error adjustments and maybe get me in the same ballpark (position wise) on the left side as social widget now is on the right? Thanks!
Hi,
It seems like you removed the widget from header. We are going to need to see it to provide you accurate CSS codes. Can you please add it back and let us know?
Best regards,
YigitWorking on a cloned dev version. Let me generate you a link in private reply to view to the staging site version.
Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
#header .widget { left: 5%; padding-top: 0; position: absolute; top: 36%; z-index: 999; }Best regards,
YigitThanks so much @Yigit … that definitely put me in the right ballpark to begin implementing the minor css adjustments. It’s implemented on my live site now
https://gawebdev.com/ and I’m happy with the balance it’s brought to the header when viewing on screen sizes above 1024. Was the larger screens on desktop view which the prior emptiness on the left of logo was most apparent.A little loss of “center” on scroll down with sticky header activated but I can live with that. Again thank you and everyone else at Enfold for making and supporting what I consider to be the very best wp theme available on the market today. Good stuff as always!
Hi,
Glad we could help!
Please take a moment to review our theme and show your support https://themeforest.net/downloads
To know more about enfold features please check – http://kriesi.at/documentation/enfold/
Thank you for using Enfold :)Best regards,
Basilis
- You must be logged in to reply to this topic.