Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #799790

    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

    #799795

    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,
    Yigit

    #799799

    Awesome @Yigit will give it a shot and report back. Thanks so much for the quick response and solution.

    #799820

    Hi!

    You are welcome! :)
    We will keep the thread open and wait to hear from you.

    Cheers!
    Yigit

    #799822

    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!

    • This reply was modified 7 years, 5 months ago by GaWebDev.
    #799827

    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,
    Yigit

    #799831

    Working on a cloned dev version. Let me generate you a link in private reply to view to the staging site version.

    #800112

    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,
    Yigit

    #800336

    Thanks 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!

    #800895

    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

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.