left side navigation possible?

Hi there,

The most straight forward way to achieve what you’re after is to firstly navigate to Appearance > Menus in your admin area and then create the menu that you wish to display on the left hand side of your site’s pages.

From there, head to Appearance > Widgets and then add the Custom Menu widget from the left to your site’s Sidebar area on the right.

Select the custom menu you’ve created for your pages from the widget’s “Select Menu:” dropdown menu.

By default, the sidebar appear on the right hand of your pages. You can change this by navigating to the editor of page and then assigning the “Alternate Sidebar Page” template to it (the template dropdown menu is under the Page Attributes module to the right of the page’s editor).

Let me know how you get on with that! I’ll be happy to help with further questions, too.

As an extra note: Instead of assigning the “Alternate Sidebar Page” template to your pages, you can also change the default positioning of your sidebar by navigating to Appearance > Customize > Theme Options. Check the Left box under Sidebar Position from that panel and then save your changes.

Thanks, Siobhan – I’m definitely heading in the right direction now. I’ve got a couple of secondary menus working on the left-hand side now. But they’re also appearing at the top of every page, above the main navigation. I really don’t want that! Is there a way to remove it from there?

And another thing…I wanted to move the left navigation over to the left so I removed the left margin. And then I wanted the primary content area to be wider, so I set it to 700px, and no right margin. It looks good on the desktop, but I’m not sure what code to add so it will work for mobile. Here’s the code I added to my css:

/* to move sidebar nav to left */
#secondary.widget-area {
	left-margin: 0px;
}

/* to make primary content area wider */
#primary.content-area {
	width: 700px;
	margin-right: 0px;
}

What do I need to add to make it responsive?

Thanks so much!

But they’re also appearing at the top of every page, above the main navigation. I really don’t want that! Is there a way to remove it from there?

Navigate to Appearance > Menu and select the menu that you’re using in your widget from the “Select a menu to edit:” dropdown menu. Under “Menu Settings” make sure that all “Theme locations” are unchecked and then save your changes.

After you’ve completed those steps, the menu should only display in your custom menu widget.

And another thing…I wanted to move the left navigation over to the left so I removed the left margin.

There’s a built in option to display the sidebar on the left under Appearance > Customize > Theme Options. If you use the built in option then the theme’s CSS will automatically handle the way the sidebar displays on different devices.

There isn’t a need for custom CSS.

As an extra note: You should never edit your theme’s code directly. Any changes you make there will be lost when it comes time to update.

To add custom CSS you should either set up a child theme or activate a custom CSS plugin. (If you have Jetpack installed then you can activate its custom CSS module.)

Hope that’s clear!

Hi Siobhan

Thanks for the menu tip – now it’s working correctly!

And thanks for addressing the CSS question in the same post. I am working in a child theme – it was the first thing I did when I created the site. So I’m adding all my custom CSS through the editor.

I got the sidebar appearing on the left using the Theme Options, but I felt there was too much white space to the left of it, so I wanted to remove it using CSS. Unfortunately that’s now affected how it displays on different devices. Is there a reference for what code I’d need to include in order to make sure I catch all the different screen sizes? I’m having trouble targeting the right selectors, even using Inspector.

Actually – I just commented out the margins code to see if that would fix things, and even after clearing browsing data for the past day, the site doesn’t look right on a phone. If you look at About or Nominate, you’ll see the text disappears off the right side of the screen.

Any idea how I would fix that? Thanks!

Hi there,

Actually – I just commented out the margins code to see if that would fix things, and even after clearing browsing data for the past day, the site doesn’t look right on a phone. If you look at About or Nominate, you’ll see the text disappears off the right side of the screen.

There shouldn’t be any existing CSS in your child theme’s style.css file for you to comment out.

The only CSS that should be added to your child theme’s style.css file should be there to override your parent’s theme’s file.

If you’re unclear about how the different files in child theme work together with the parent, my colleague Kathryn gives a really nice explanation in the following video:

Any idea how I would fix that? Thanks!

The following part of your custom CSS is setting the content area to be a specific width across all devices:

#primary.content-area {
    width: 700px;
}

You’ll need to remove that and then make use of CSS media queries in order to target specific devices.

The following will change the width of the content area on devices that are 1230px or bigger:

@media screen and (min-width: 1230px) {
    .content-area {
        width: 540px;
    }
}

The following will then control the width of the content area on devices that are between 1020px and 1230px in width:

@media screen and (min-width: 1020px) {
    .content-area {
        width: 580px;
    }
}

Experiment with the above in your browser’s inspector and let me know if any questions come up along the way.

Hi Siobhan – sorry; I realize I wasn’t very clear…the code I thought I had commented out was CSS I added in my child theme’s style.css file. Thanks for making sure I understand how it works, and for the tutorials. And thanks for finding the offending piece of code. I’ve removed it and now the site’s working perfectly on all devices.

Perfect! ?? We’re right here if any extra questions come up, too.