Home Forums Weaver Xtreme Theme Min 300 PX Width for Sidebar

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #57996

    diprecipes
    Participant

    Hi all,

    I need some help with a change I need to make to my site. I need the sidebar to remain a minimum of 300 px wide at all times. It can be larger, but it can’t be smaller. It also can’t stack below the content on screens larger than 1023px.

    Is this something that can be managed with custom CSS?

    I’m on Weaver Extreme (currently 3.1.10) and have plus. Link is:¬†https://www.diprecipecreations.com/

    Thanks in advance!

    #57997

    scrambler
    Moderator

    A few things.

    Sidebar only stack under the content (or above) when the browser is less than 768px wide, so you should never see it do that at higher resolution.

    Given the above, setting the sidebar width to 39% (300/768) would do what you want as the sidebar at its smallest (browser width of 768px) would be 300px.

    But that may make the sidebar way too big on larger screen.

    Try it, and if that is the case, we can look into alternate CSS to set the sidebar width in absolute pixel value instead of %

    #57998

    diprecipes
    Participant

    Thanks scrambler! I updated the sidebar to 39%, but I’d prefer it not be that big on larger screens as you said.

    #57999

    scrambler
    Moderator

    Try the rules below in the theme Global Custom CSS Rule box, that should give you a fixed width sidebar

    .l-content-rsb-m, .is-desktop #infobar {width:calc(99% - 300px);margin-right:1%;}
    .l-sb-right {width:300px;}

    If you have pages with a different sidebar configuration, we will need different rules for them

    #58000

    diprecipes
    Participant

    That creates a fixed width sidebar, but forces it to stack under the content at 1216px.

    #58001

    diprecipes
    Participant

    Thinking I can do a few media queries to adjust. Fixed width logic for larger screens so the sidebar doesn’t take a huge amount of real estate and % based width on smaller screens before the normal break point so the fixed width doesn’t create a forced break too soon. Think that could work?

    #58002

    scrambler
    Moderator

    Your rule is corrupted because you copy pasted from the forum and the minus sign (in 99% – 300px) was changed into a dash.

    Below is the correct rule in a Preformatted container that should be correct.

    But to be sure, retype the minus sign in the rule once in the theme CSS box

    .l-content-rsb-m, .is-desktop #infobar {width:calc(99% - 300px);margin-right:1%;}
     .l-sb-right {width:300px;}
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.