Content width and Fixed Site-Navigation etc

Do you have the site live, so I could look at?

At this time we have:

.site-content width: 65.104166667%;
.widget-area width: 30.5%;

You can try old rules from twenty twelve:

.site-content width: 65.104166667%;
.widget-area width: 26.041666667%;

Otherwise, just change the values and visually check if the sidebar doesn’t become too close to content.

Hi Tomas. Yes my test site is live but password protected. Can I send you a private message with the password? Many thanks, David

Sure, my email is in readme.txt

Hi Tomas, thank you very much for your help. I will make a donation to you to say thank you.

I tried using the waypoint jQuery but I’m afraid that even though I managed to get it to load via the child functions.php, I could not get it to work and it is way beyond the scope of my knowledge. It looks excellent though.

I did get another simpler jQuery script to work though to give me a fixed sidebar instead. It’s not as elegant as the smooth drop down menus via waypoint but it does the trick for now.

I also opted for a “position: fixed” top header with elusive icon links for small devices where the sidebar is at the bottom of the page using @media queries and editing the header.php to add a #top-header div. Still got a lot of work to do but it’s getting there.

I have one further question regarding the content width by the way:

In the functions.php file on line 79, it has this code

// 1.0 - Set up the content width value based on the theme's design and stylesheet.
if ( ! isset( $content_width ) )
	$content_width = 625;

I assume I should update that with the new #primary width when I have set it? It’s 1 pixel larger than the #primary width as it stands isn’t it?

Could you tell me exactly how I would overide the the orginal width in the child functions.php please? Or do I just add the exact same code to the child functions.php and edit the width?

Many thanks, David

If you changed (made bigger) the width not a lot, I would leave it as it is. You see, $content_width does only one thing – it prevents images and videos to overflow the content container boundaries. That’s it.

Here is discussion:

https://wordpress.stackexchange.com/questions/11766/what-is-the-role-and-history-of-the-content-width-global-variable

So if you would add very big image to your post, it would auto-sized to the $content_width value. If you think that your design needs to make max. image width bigger, only then you would need to consider the change.

In that case you will need to override it:

// Override content width (for photo and video embeds)
$content_width = 500;

// Display 1000px width content if full width page template
function mytheme_content_width() {
    if ( is_page_template( 'page-templates/full-width.php' ) || is_attachment() ) {
        global $content_width;
        $content_width = 1000;
    }
}
add_action( 'template_redirect', 'mytheme_content_width', 11 );

I found this good tip here: https://zeaks.org/2012/twenty-twelve-theme-three-column-layout

Hi Tomas, thank you very much, that’s a great help. Very good to know about that and very interesting articles too.

All the best, David