Content and Widget area overlaps…

Just noticed this actually appears on other pages too, even when viewed under normal conditions.

Is there some way I can fix this? ??

Hi @cooljosh3k,

The issues here have to do with the way your menu has been styled to take up the full width of the page it’s on.

By default, the sidebar should start at the very top of the content area that it lives in but, as the menu is also included as part of the main content area, we have to compensate for the fact that the menu takes up 100% of the room by using margin-top in our custom CSS.

As you add more and more items to your menu, it’ll start to take up more room and we’ll then have to keep adding more margin-top to the sidebar. As you’ve discovered, this also causes problems on mobile devices.

Rather than continuing to patch this problem through custom CSS, I recommend taking the code for the menu outside of the main content area.

To do this: Copy the parent theme’s header.php file to your child theme’s directory.

From there, locate the following code, which defines your site’s navigation:

<div id="primary">

	<nav id="access" role="navigation" class="navigation-main clearfix">
		<h1 class="menu-toggle section-heading"><?php _e( 'Menu', 'bouquet' ); ?></h1>
		<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'bouquet' ); ?>"><?php _e( 'Skip to content', 'bouquet' ); ?></a></div>

		<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
	</nav><!-- #access -->

We want to move this code just above <div id=”primary”>:

<nav id="access" role="navigation" class="navigation-main clearfix">
	<h1 class="menu-toggle section-heading"><?php _e( 'Menu', 'bouquet' ); ?></h1>
		<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'bouquet' ); ?>"><?php _e( 'Skip to content', 'bouquet' ); ?></a></div>

		<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #access -->
<div id="primary">

After you’ve saved the above changes, you can then remove the margin-top: 181px; that’s been added to your sidebar through custom CSS. The sidebar should then appear at the top of the page, across devices.

I tried this, but the problem still exists. It is easily visible on pages like tf2tightrope.com/projects

I have the header.php file in my child theme and the relevant part now looks like this:

	<div id="main">
			<nav id="access" role="navigation" class="navigation-main clearfix">
				<h1 class="menu-toggle section-heading"><?php _e( 'Menu', 'bouquet' ); ?></h1>
				<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'bouquet' ); ?>"><?php _e( 'Skip to content', 'bouquet' ); ?></a></div>

				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
			</nav><!-- #access -->
		<div id="primary">

Hi @cooljosh3k,

Can I ask if there’s a reason you couldn’t use the theme’s default sidebar for your purposes? As your custom sidebar is in the same position, it may be simpler in the long run for you to use the default sidebar and then style it to your liking.

The reason for the overlap between your new sidebar and the content area:

• Bouquet detects whether widgets have been added to the default Sidebar 1 area when loading a page.
• If widgets have not been added to the Sidebar 1 area then a special CSS class – one-column – is added to the body of the page.
• Pages with the one-column class are styled to take up the full width and no room is left for a sidebar.

As you currently don’t have widgets placed in the Sidebar 1 area, the above checks are put into action. You could try placing widgets in that area to see if it resolves your issue.

You could also reduce the width that’s added to the one-column class from 100% in your custom CSS:

body.one-column #content-wrapper {
    width: 85%;
}

Please note, you should test the above CSS across devices of different sizes and may need to make use of media queries to limit it to screens of a certain width.

I used to have a monthly earnings / donations sort of progress bar. It was horizontal and just below navigation.

Since I am no longer using that, I guess I could go back to using that for this purpose.

I tried that code, but it does kinda make things mess up below my vertical banner ad widget.

How can I revert all the way back to using the original sidebar and go from there?

@cooljosh3k: You would need to remove the code that you added to create the custom widget from your child theme.

Alright. I have deleted header.php, index.php, page.php, sidebar.php and single.php from my child theme. I have removed the sidebar code from my functions.php file so it just looks like this now:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

I also removed the following code from my style.php file:

#secondary-wrapper {
	width: 100%;
	background-color: transparent;
}
#secondary-sidebar {
	float: right;
	width: 168px;
	margin-top: -8px;
	text-align: right;
	position: relative;
	z-index: 10
}
.widget {
	margin: 0px 0px 0px 0px;
	padding-bottom: 0.01em;
}
.widget_authors img {
	float: right;
	padding-right: 0;
	padding-left: 10px;
}

This does appear to have the original sidebar function again, albeit in the wrong place with some other issues I will have to fix up too.

What is the next step?

Hi @cooljosh3k,

Moving the code for the header outside of the primary container, as suggested here, would resolve the issue with the overlap.

Okay, thanks. I don’t know which parts I need to add back in.

What is the next step? The content overlaps and the widget does not line up with the bottom of the page.

Is there any way I can thank you for all this support? I could not find any link to donate or similar methods.

Hi @cooljosh3k,

You’ll need to remove some of the custom CSS that you’ve added to the child theme’s style.css file. The following, for example, is causing the main content to overrun the sidebar:

#content-wrapper {
    margin: 0 0 0 0;
}

The height of the sidebar is dictated by the content within it. At the moment the iframe within the Text widget is 1024px in height.

Is there any way I can thank you for all this support? I could not find any link to donate or similar methods.

That’s very kind of you but not necessary. I work for the company behind this theme, Automattic. ??

A big improvement. Thanks.

The sidebar widget does not sit flush against the navigation and content areas though. It was doesn’t blend in.

Hi @cooljosh3k,

That’s the default design of Bouquet, as you can see from its demo site:

https://bouquetdemo.wordpress.com/

You will need to use custom CSS to style the default design to your liking.

For example, the following would amount of margin (set to 30.4% by default) between the main content and the sidebar:

#content-wrapper {
    margin-right: 29.2%;
}

In addition, this custom CSS would set the sidebar’s background colour to the same as the main content’s and also remove its box shadow and border:

#secondary-wrapper {
    box-shadow: none;
}

#main .widget-area {
    background: #edf6fe;
    border: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

Together the above snippets would make the sidebar blend in with the main content a little better, if that’s your wish.

As mentioned before, the height of the sidebar is defined by the content within it. If you want to give the appearance of the height being the same as the main content area, then you’d first need to remove the following from your custom CSS:

#main {
    background-color: #5175b3 !important;
    background-color: transparent;
}

#main is the element that surrounds both the main content area and the sidebar. We want to set its background to match and also remove box shadows from the main content area:

#main {
    float: left;
    background: #edf6fe;
}

#primary, #content {
    box-shadow: none;
}

Hope that helps.

As an important note: We’ve gone beyond the scope of support that this forum is intended for throughout our conversations. Although we’re happy to help you get setup and make small tweaks to the theme’s default design, we encourage you to experiment by yourself with more advanced customisations. If needed, you could also consider hiring a professional to help out. WordPress has an official jobs board here:

https://jobs.wordpress.net/

Thanks!

Everything looks so much better now! ??

Only problems I found that stood out about that was the colour (I just adjusted it) and that having

#main {
	background: #edf6fe;
}

Makes it have a thin white border around everything. Not having it though, leaves a big transparent area below the sidebar.

You’d need to remove the padding from #main using padding: 0;.

Ah, okay. Thanks.

With all that done is is so very close to perfect now. For some reason there is the little tiny corners at the top showing through.