How to remove wrapper on page but keep menu.

  • Resolved Alison

    (@anonymical7)


    8 years, 9 months ago

    Hi All,
    I am trying to remove the wrapper of just the front page using css. I want the front page to show nothing but the menu and the background image. The page id is .page-id-6217
    Heres the site link

    The theme is twenty twelve. Any ideas how the wrapper can be removed for one page?

    Thanks, A

Viewing 15 replies - 1 through 15 (of 25 total)

  • Removing the wrapper would not remove anything. Everything is inside the header, including the menu, and removing the header would remove the menu also.

    Your best bet would be to create a Child Theme for any changes, as when the main theme updates, all the changes you may have made to the main theme will be lost.

    Thread Starter Alison

    (@anonymical7)

    Thanks Tecnonomad, but I did use the jetpack css editing option. So Maybe its better to create a custom page template then and make a page with just the header and menu? I did try that, but what would the “if “statement and “get” command be for the header and menu without the backdrop? I am a complete php newbie. What do I remove or have in the page to just render the header and menu?

    Thanks for any who can advise!

    <?php
/**
 * Template Name: Index Page Template
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */

get_header(); ?>

		<div id="primary" class="site-content">
		<div id="content" role="main">

			<?php while ( have_posts() ) : the_post(); ?>
				<?php get_template_part( 'content', 'page' ); ?>
				<?php comments_template( '', true ); ?>
			<?php endwhile; // end of the loop. ?>

		</div><!-- #content -->

	</div><!-- #primary -->
	</div><!-- #primary -->

    Why don’t you try a different theme? Something with maybe a front-end editor that might be a bit more user friendly for you…

    That php code can be very confusing for someone just getting started and themes can break easily. Are you set on Twenty Twelve? If so, I can help out, but in the long run another option might be easier for you…

    Thread Starter Alison

    (@anonymical7)

    Thanks Jessi, Twenty twelve is the optimal choice for me. I have already made a lot of adjustments to it. Its really just the custom template for the front page. I appreciate the feedback and advice!

    Ok, no problem. Tell me what exactly you are wanting to accomplish here…. I am assuming you mean you want the navigation and logo to be separate from the rest of the body so that it isn’t all in one boxed container?

    Thread Starter Alison

    (@anonymical7)

    Thanks Jessi!

    Basically the page just has to have the menu and header in the same place. Yes, so its not in the same container. I mean, if the wrapper was invisible completely for just this one page it would be perfect! Heres the site link

    Immensely thankful,
    A

    Hmmm I smell a culprit… can you find your header.php file and attach that code here too?
    It’s no problem at all.

    That wrapper contains your content… you don’t actually want that invisible right? Just the background color, but keep the background behind the navigation?

    Thread Starter Alison

    (@anonymical7)

    Sure, here you go!

    <?php
/**
 * The Header template for our theme
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="https://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
	<header id="masthead" class="site-header" role="banner">
		<hgroup>
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
		</hgroup>

		<?php if ( get_header_image() ) : ?>
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" /></a>
		<?php endif; ?>
<nav id="site-navigation" class="main-navigation" role="navigation">
			<button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav><!-- #site-navigation -->
	</header><!-- #masthead -->

	<div id="main" class="wrapper">

    Ok, so just to clarify… are you wanting something to look kind of like this? https://cloudup.com/ctizYBBXVO7

    Thread Starter Alison

    (@anonymical7)

    So there is no white in background behind the header or menu. So you just see the photo behind it. No white.

    A

    Thread Starter Alison

    (@anonymical7)

    Not sure if this helps or is related, but the background photo is done by a plugin, that allows me to choose a background per page.

    Ok so just to remove it entirely from the site you would want to change the css for the .site class that is in the div with the #page id.

    If you were to place this in your style css:

    .site {
    background-color: transparent;
    box-shadow: none!important;
}

    That would remove that box completely, but from the entire site. That is because the class that is creating that box is in your header.php, and not a template file. Your header.php is something that is used site wide… but you are just wanting in on the main page to not have the white background, but the other pages to have it?

    Also, if you want that custom background to fill the entire page… just add this to your style.css:

    body.custom-background {
     background-size: cover!important;
}
    Thread Starter Alison

    (@anonymical7)

    Hi Jessi!

    Thanks for being so helpful! Correct,yes it is just for this front page (id 6217). So if I make it dependent on just the one page using the page id, how should it look? Like this?

    .page-id-6217 .site {
    background-color: transparent;
    box-shadow: none!important; body.custom-background {
    background-size: cover!important;{
}

    A

Viewing 15 replies - 1 through 15 (of 25 total)
  • The topic ‘How to remove wrapper on page but keep menu.’ is closed to new replies.