Help moving Navigation sidebar in blog template

Travel Forums System Talk Help moving Navigation sidebar in blog template

1. Posted by TraceyG (Respected Member 42 posts) 33w Star this if you like it!

I'm using the Postcard template and have always been annoyed that the Navigation sidebar runs right down the right-hand side of my large photos at the beginning of a blog post. But now that most folks likely view the blog on their phone, not a laptop, it's even worse -- the sidebar literally runs right down the middle of the photos! I've tried playing around with the template, but I'm no coder, so my efforts have been unsuccessful. So I'm wondering -- is there a way to move the Navigation sidebar in the Postcard template further off to the right? I'd rather not switch templates, but if the sidebar absolutely cannot be moved over, can you recommend another template where the sidebar won't cut off my large photos at the beginning of a blog post? Many thanks for any recommendations!

2. Posted by Sander (Moderator 5675 posts) 33w Star this if you like it!

I'll try to have a look at this sometime tomorrow to offer some help. Sadly most of the blog templates were put together well before responsive design was a thing, so it might be difficult.

3. Posted by Sander (Moderator 5675 posts) 33w 1 Star this if you like it!

Click on "Template" in your blog management area.

Since you've previously modified your template, you'll now see a large textarea with CSS. However, your modifications make it much harder for me to give useful instructions and I see a few bugs caused by them (including the sidebar going over the large images; that doesn't happen with the default template, which is actually pretty responsive!), so I'm going to recommend first switching back to the regular Postcard template. The one functional change I see in your template is that you've increased the font-size, so I'm going to carry that one over. If you remember other functional changes you've made, I'd be happy to help you reconstruct those as well.
Click on the "Use a Predesigned Template" to get a list of the standard templates.
Click on the green "Choose" 'button' in the Postcard template.

General instructions, usable by anyone:
Click on "Customise this template" inside your selected template (under "Your Current Selection")
You'll now get a large textarea with the default CSS of the template. Scroll down to the very bottom, and add these lines there (keeping all the new rules together, rather than editing the existing rules, so it's easier to keep track of what you've done and modify them further). We put them at the bottom, so we're certain they override the regular rules of the template.

/* Set a larger font-size */
body { font-size: medium; }

/* Set a fixed width for the navigation column, and make the rest of the blog take up the remaining space. */
#blogcontent { width: calc(99% - 250px); }
#navigation { width: 250px; }

/* Since the above will cause very long lines of text on large resolution screens (which isn't very nice for reading), we'll set a maximum width for the blog content + navigation together. Adjust this width to taste. */
#wrapper { max-width: 1400px; }

/* The default responsive design of the postcard template has large images scaling along with the available space, and getting smaller for screen sizes between 800px and ~1350px. The above changes reduces this effect to screen sizes between 800px and ~1185px. We're going to add proper responsive styling for screen sizes smaller than 800px, but you could change the "800px" to "1185px" (or anything in between) if you care about visitors always getting the largest possible image size for their screen. */
@media only screen and (max-width: 800px) {
/* Make the blog always scale along with the screen size. */
#wrapper { min-width: auto; }
/* Make the blog content take up all available space. */
#blogcontent { width: auto; }
/* And push the navigation column below it all. */
#navigation { clear: left; }

/* The default styling of the navigation column relies on fixed width images, which only works as a narrow column - that's not very useful here underneath the main content, so we remove all background-images, and style it ourselves. */
#navigation, #nav_wrapper, #navigation #changestyles, #navigation #navbottom { background-image: none; }
#navigation { width: auto; margin: 20px 30px 0 90px; background-color: #f4f4ec; border-radius: 4px; border: 1px solid #d9d9d3; }
/* Next, we lay out all content of the navigation column in useful blocks, next to each other where possible. */
#nav_wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; }
#nav_wrapper > * { min-width: 200px; }

/* Finally we fix the brand line at the very top of the blog to also be responsive. */
#brand_line { width: auto; height: auto; overflow: hidden; padding-bottom: 8px; }
#tp_branding, #user_links { position: relative; }
#tp_branding { float: left; padding: 8px 40px 16px 160px; }
#user_links { float: right; }

/* On very small screens, the text runs out of the red bar of the header. Since that's a background image, we reduce the text size. */
@media only screen and (max-width: 600px) {
#header #title { font-size: 1.2em; }

You can see the result here:

[ Edit: Edited on 28 Feb 2021, 11:36 GMT by Sander ]

4. Posted by TraceyG (Respected Member 42 posts) 33w Star this if you like it!

Ah - this is genius! I didn't change anything because whatever you did to the template fixed the problem completely and perfectly. Thank you!!

5. Posted by Peter (Admin 7017 posts) 33w 1 Star this if you like it!

Nice work Sander. I think I'll roll this change out for the regular Postcards template too (maybe minus the font size change). Most people using the template would benefit from this.

6. Posted by Sander (Moderator 5675 posts) 33w Star this if you like it!

Sounds good to me! :)