Home Forums Weaver Xtreme Theme Site layout with fixed sidebar

This topic contains 11 replies, has 2 voices, and was last updated by  scrambler 1 week, 2 days ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #57188

    Alex777
    Participant

    Hello,

    I have weaver xtreme plus.

    Are there any chance to do layout like this, with fixed sidebar?

    http://bridge189.qodeinteractive.com/services/

     

    #57190

    scrambler
    Moderator

    Yes, we can but it will require some custom CSS.

    Create the site with a left sidebar, then post a link to the site, and I will look into the required CSS to do the job.

    One thing you need to decide is what happens to the sidebar on small tablet and on phones. Should it just disappear, or be moved below or above the content?

    #57191

    Alex777
    Participant

    Site link http://czinst.iconsultant.com.ua/

    I placed extra menu widget into sidebar. I want it transform mobile menu on small tablets and phones.

     

    #57192

    scrambler
    Moderator

    You need to first select Main Options > Full Width > One step layout > Traditional

    #57193

    scrambler
    Moderator

    Then the rules below should do the job for a 200px wide fixed sidebar and 10px space between the rest of the site
    Rules go in the Theme Global Custom CSS Rule box

    .is-desktop .l-sb-left-rm, .is-desktop .l-sb-left {width:200px;position:fixed;top:0px;}
    .is-desktop #header, .is-desktop #colophon, .is-desktop #content, .is-desktop #infobar {margin-left:210px;}
    .is-desktop #content, .is-desktop #header, .is-desktop #colophon {width:auto;}

    If it needs tweaking, post back with the rules in place

    #57223

    Alex777
    Participant

    @scrambler

    Thank you and I have one thing to repair for now. I need delete space on the left in the content area. Make content area bigger like header and footer.

    Site link http://czinst.iconsultant.com.ua/

    #57224

    scrambler
    Moderator

    Add the rule below

    .is-desktop #container {float:right !important;width:calc(100% – 215px);}

    #57225

    scrambler
    Moderator

    Add the rule below

    .is-desktop #container {float:right !important;width:calc(100% – 215px);}

    #57226

    Alex777
    Participant

    It changes nothing.

    #57227

    scrambler
    Moderator

    Sorry, my brain slipped

    .is-desktop #content {float:left !important;width:calc(100% - 215px);}
    

    becarefull when you copy paste that the minus sign does not ge changed with a dash.
    If the width is not good, retype the rule with a s[ace minus space

    #57228

    Alex777
    Participant

    Thank you, it works.

    One last thing, I want to side bar content jump to the top instead of the boottom or side bar content transform into logo and mobile menu.

    #57229

    scrambler
    Moderator

    To get the sidebar content on the top on mobile, used the Sidebar layout “Sidebar on left (stack on top)”.

    If you want a logo and a mobile menu on mobile, then select your menu as your primary menu, and in the primary menu “Hide area” option, select “hide on desktop”.
    Then set your logo as the site logo in the customizer, Hide that logo using Main Options > Header > Custom Logo logo > Hide WordPress Custom logo > Hide on all devices. Then, check the option to add the Site logo to the menu in the primary menu options.
    Finally we will need to hide your sidebar on mobile with the rule below
    .is-mobile .l-sb-left {display:none;}

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.