Need help? Check out our Support site, then


width problems - left sidebar menu Tweny Fourteen

  1. Hi,

    Apologies in advance for possibly confusing terminology - I've been working hard at css but talking about it is tricky!

    I widened my left sidebar, menu and widgets such that the display area as a whole could accommodate wider (than default) widgets. I don't want my site to display a right sidebar at all - so would like to display all widgets spaciously on the left.

    I used the following css in Customization to achieve this:

    #menu-left-sidebar-menu {
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    width: 300px;
    }

    #secondary {
    width: 240px;
    }

    .primary-sidebar .widget .widget-title {
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 1px;
    margin-top: -20px;
    }

    My problem is that when you scroll to below the final widget, the custom sidebar width seems to revert to default, leaving an ugly step in my left sidebar. Please could you suggest an alteration to my css to account for this?

    Thank you for your help!

    The blog I need help with is driftsole.com.

  2. Hi there, the following would get rid of the step when the browser window is 1008px wide or wider, but things go awry when the browser window goes below that width. Narrow down your browser window to the point where the sidebar moves down below the content area and take a look.

    .site:before {
        width: 300px;
    }

    My suggestion, to keep the responsive nature of your site for narrower browser window settings and narrower devices would be to limit the change to 1008px and wider by replacing your code above with the following media query.

    @media screen and (min-width: 1008px) {
    #menu-left-sidebar-menu{
    	font-size:14px;
    	line-height:20px;
    	text-align:left;
    	width:300px
    }
    
    #secondary{
    	width:240px
    }
    
    .primary-sidebar .widget .widget-title{
    	font-size:18px;
    	font-weight:300;
    	margin-bottom:1px;
    	margin-top:-20px
    }
        .site:before {
        width: 300px;
    }
    }

    As you narrow down your browser window, you will also see that your content is being cut off on the right. With Responsive Width themes such as Twenty Fourteen, you have to follow the width conventions in the existing CSS. Typically they will be set in variable units such as a percentage, or they will have a width of 100% and then a max-width setting such as 1260px. As an example, you have the following for #page (.site)

    #page {
        float: left;
        width: 1260px;
    }

    Whereas the original CSS for .site (#page) is

    .site {
        background-color: #FFFFFF;
        max-width: 1260px;
        position: relative;
    }

    I would suggest that you copy your existing custom CSS out and save it in a plain text file for reference and then add the stuff back in setting the widths as they have been set in the existing CSS so that you can retain the responsive nature of the theme for those on narrower screens and devices.

    You can take a look at the Twenty Fourteen demo site and narrow and widen your browser window to see how things flow and change for smaller screen sizes.

  3. thesacredpath!

    Thank you so much. I have used your advice (to many others) many times in the past - it is very much appreciated and I'm sure you have helped countless css'ers. I had hoped you would reply to my question!

    You're suggestions have worked perfectly. The small screen (mobile) responsiveness was going to be my next question, so I really appreciate that you identified the problem which now seems to be sorted out.

    I have another question, which is perhaps best asked in a new thread so that others can find it easily, but I'll ask it here and you can suggest we start a new thread if necessary.

    For small screens (smaller than 1008px in my case) is it possible to hide some sidebar items (widgets) with a view to improve site readability? For example, the instagram widget is probably not necessary on small screens which would have to scroll past it. If this is not possible perhaps as a plan-b, removing the left sidebar entirely on small screens?

    Thank you very much!

  4. @driftsole, you are welcome, and yes, that is definitely possible. Let's do that in a separate thread. I'll watch for it.

Topic Closed

This topic has been closed to new replies.

About this Topic