Hello,

I have a website in which I want to replace the menu bar. I have created the menu using html and CSS. The Css file is a separate file. I have included the sidebar using include sidebar.html. The sidebar does shows but all the rest of the page is displayed wrongly. Also the sidebar is not complete, two last button go outsite the bar.

<?php

if (function_exists('get_thethe_image_slider')) {
        print get_thethe_image_slider('Slider Name');
    }

// Exit if accessed directly
if ( !defined('ABSPATH')) exit;


?>
<!doctype html>
<!--[if !IE]>      <html class="no-js non-ie" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 9 ]>    <html class="no-js ie9" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->
<head>

<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

<title><?php wp_title('&#124;', true, 'right'); ?></title>

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_enqueue_style('responsive-style', get_stylesheet_uri(), false, '1.9.3.2');?>

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

<?php responsive_container(); // before container hook ?>
<div id="container" class="hfeed">

    <?php responsive_header(); // before header hook ?>
    <div id="header">

        <?php responsive_header_top(); // before header content hook ?>

        <?php if (has_nav_menu('top-menu', 'responsive')) { ?>


 <?php wp_nav_menu(array(
                    'container'       => '',
                    'fallback_cb'     =>  false,
                    'menu_class'      => 'top-menu',
                    'theme_location'  => 'top-menu')
                    ); 
                ?>
        <?php } ?>

    <?php responsive_in_header(); // header hook ?>

    <?php if ( get_header_image() != '' ) : ?>

        <div id="logo">
            <a href="<?php echo home_url('/'); ?>"><img src="<?php header_image(); ?>" width="<?php if(function_exists('get_custom_header')) { echo get_custom_header() -> width;} else { echo HEADER_IMAGE_WIDTH;} ?>" height="<?php if(function_exists('get_custom_header')) { echo get_custom_header() -> height;} else { echo HEADER_IMAGE_HEIGHT;} ?>" alt="<?php bloginfo('name'); ?>" /></a>
        </div><!-- end of #logo -->

    <?php endif; // header image was removed ?>

    <?php if ( !get_header_image() ) : ?>

        <div id="logo">
            <span class="site-name"><a href="<?php echo home_url('/'); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home"><?php bloginfo('name'); ?></a></span>
            <span class="site-description"><?php bloginfo('description'); ?></span>
        </div><!-- end of #logo -->  

    <?php endif; // header image was removed (again) ?>



<?php if (function_exists('pixopoint_menu')) {pixopoint_menu();}; ?>

    <?php get_sidebar('top'); ?>


                <?php wp_nav_menu(array(
                    'container'       => 'div',
                        'container_class'   => 'main-nav',
                        'fallback_cb'     =>  'responsive_fallback_menu',
                        'theme_location'  => 'header-menu')

                    ); 
                ?>

            <?php if (has_nav_menu('sub-header-menu', 'responsive')) { ?>

                <?php wp_nav_menu(array(
                    'container'       => '',
                    'menu_class'      => 'sub-header-menu',
                    'theme_location'  => 'sub-header-menu')
                    );


                ?>
            <?php } ?>


            <?php responsive_header_bottom(); // after header content hook ?>

<?php

  include 'sidebar.html';

?>

    </div><!-- end of #header -->


    <?php responsive_header_end(); // after header container hook ?>

    <?php responsive_wrapper(); // before wrapper container hook ?>
    <div id="wrapper" class="clearfix">
        <?php responsive_wrapper_top(); // before wrapper content hook ?>
        <?php responsive_in_wrapper(); // wrapper hook ?>

Recommended Answers

All 4 Replies

Problem may be in closing DIV tags... make sure HTML tags are closed properly..

I don't see any divs open. That's my HTML sidebar

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="menu2.css" type="text/css" media="screen" />

<title>Mega Drop Down Menu</title>
<!--[if IE 6]>
<style>
body {behavior: url("csshover3.htc");}
#menu li .drop {background:url("img/drop.gif") no-repeat right 8px; 
</style>
<![endif]-->

</head>

<body>

<ul id="menu">

    <li><a href="#" class="drop">HomePage</a><!-- Begin Home Item -->


    </li><!-- End Home Item -->

    <li><a href="#" class="drop">All Products</a><!-- Begin 5 columns Item -->

        <div class="dropdown_5columns"><!-- Begin 5 columns container -->

            <div class="col_5">
             <img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <h2>Homecare</h2>
            </div>

            <div class="col_1">
                  <h3><p></p>Around the Home</h3>
                <ul>
               <li><a href="#">Disabled Kitchen Aids</a></li>
                    <li><a href="#">Bed & Chair</a></li>
                    <li><a href="#">Bathroom & Toilets</a></li>
                    <li><a href="#">Vision</a></li>
                    <li><a href="#">Grab Rail & fall Protection</a></li>
                    <li><a href="#">Door Opener</a></li>

                </ul>   
            </div>

            <div class="col_1">
                        <h3>Mobility</h3>
                <ul>
             <li><a href="#">Walking Aids</a></li>
                    <li><a href="#">Wheelchairs & Scooters</a></li>
                    <li><a href="#">Wheelchairs/Scooters Accesories</a></li>
                </ul>
            </div>

            <div class="col_1">

                               <h3>Rehab & Exercise</h3>
                <ul>
                  <li><a href="#">Exercise & Rehabilitation Equipment </a></li>
                    <li><a href="#">Treatment Room</a></li>
                    <li><a href="#">Games & Activities</a></li>

                </ul>   

            </div>

            <div class="col_1">

                        <h3>Footwear</h3>
                <ul>
                    <li><a href="#">Foot Comfort </a></li>
                    <li><a href="#">Ladies Footwear</a></li>
                    <li><a href="#">Gents Footwear</a></li>
                     <li><a href="#">Shoehorn & Shoelaces</a></li>
                    <li><a href="#">Dressing Grooming</a></li>
                </ul>  


            </div>

            <div class="col_1">
                <h3>Personal Health</h3>
                <ul>
                 <li><a href="#">Incontinence Care</a></li>
                    <li><a href="#">Hearing Aids/Loop System</a></li>
                    <li><a href="#">Medication Dispenser</a></li>
                    <li><a href="#">Monitors</a></li>
                    <li><a href="#">Pain Management</a></li>
                    <li><a href="#">Medical Conditions</a></li>

                </ul>   
            </div>



    <div class="col_2">
             <img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <h2>Medical</h2>

            <div class="col_1">

                <ul>
                    <li><a href="#">Medical Equipment</a></li>
                    <li><a href="#">Medical Furniture</a></li>
                    <li><a href="#">Disposables</a></li>

                </ul>  
            </div>
             </div>


                          <div class="col_2">
             <img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <h2>Surgical Instruments</h2>

            <div class="col_1">

                <ul>
                    <li><a href="#">Medical Equipment</a></li>
                    <li><a href="#">Medical Furniture</a></li>
                    <li><a href="#">Disposables</a></li>

                </ul>  
            </div>
             </div>

        </div><!-- End 5 columns container -->

    </li><!-- End 5 columns Item -->


    <li><a href="#" class="drop">Special Offers</a><!-- Begin 4 columns Item -->



        </div><!-- End 4 columns container -->

    </li><!-- End 4 columns Item -->

    <li class="menu_right"><a href="#" class="drop">Contact Us</a>




        </div>

    </li>

    <li class="menu_right"><a href="#" class="drop">News Feed</a><!-- Begin 3 columns Item -->

        <div class="dropdown_3columns align_right"><!-- Begin 3 columns container -->


            <div class="col_3">
                <h2>Here are some image examples</h2>
            </div>

            <div class="col_3">
                <img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<a href="#">Read more...</a></p>

                <img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. <a href="#">Read more...</a></p>
            </div>

        </div><!-- End 3 columns container -->

    </li><!-- End 3 columns Item -->


</ul>


</body>

</html>

Thanks mrvijayakumar, there was two extra divs.

welcome london-G. happy Coding... :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.