Menubar Overlapping The Other Content

Hi there,

I just got to know about the yii bootstrap extension and installed it in my app and I have a problem with the main.php in the layout folder. I am following the demo website and also looking the bitbucket code and I feel everything is fine, the problem is that my content no matter what I do, it always starts on the first line of the browser. If I have Menubar and then any content, menubar overlaps(is on top) of the content. I just cant seem to able to figure out the issue.

here is my main.php




<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title><?php echo "Hello World" ?></title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta name="description" content="Personal blog ">

        <meta name="author" content="Author">

    </head>

    <body>

        <?php $this->widget('bootstrap.widgets.TbNavbar',array(

            'brand'=>'Hello World',

            'type'=>'null',

            'collapse'=>true,

            'items'=>array(

                        array(

                            'class'=>'bootstrap.widgets.TbMenu',

                            'items'=>array(

                                array('label'=>'Home', 'url'=>array('/blog/index')),

                                array('label'=>'Comments', 'url'=>array('/comments/index')),

                                array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),

                                array('label'=>'Contact', 'url'=>array('/site/contact')),

                            ),

                            'htmlOptions'=>array('class'=>'pull-left'),

                        ),

            ),

        )); ?>

        <div class="container">

            

            <?php $this->beginWidget('bootstrap.widgets.TbHeroUnit', array(

                'heading'=>'Hello World',

            )); ?>

            <p>More about me here </p>

            <p><?php $this->widget('bootstrap.widgets.TbButton', array(

                'type'=>'primary',

                'size'=>'large',

                'label'=>'Learn more',

            )); ?></p>

            <?php $this->endWidget(); ?>

            <?php if (!empty($this->breadcrumbs)):?>

            <?php $this->widget('bootstrap.widgets.TbBreadcrumbs', array(

                'links'=>$this->breadcrumbs,

            )); ?>

            <?php endif?>

            <?php echo "Test Content for Hello World";?>

            <hr />

            <footer>

                <p class="powered">

                    Powered by Author

                </p>

                <p class="copy">

                    © Author, 2012

                </p>

            </footer>

        </div>

    </body>

</html>






I have verified that it picks the right the asset files(at least I think so). Screen shot also attached

All I know in traditional TB is that you need to set a top padding (~70px) to your main container. If you’re familiar with CSS and particularly positioning, you can check it by inspecting your page.

add 50px margin-top to your container right after your TBnav widget

NOTE:

Move inline style to your css file

Thanks bennouna and alirz23.

margin works, but let me rephrase my question.

I am not an expert in CSS (Yet), but when I did inspect on the YII bootstrap demo page and my page, I see that containers used in demo page align automatically, but in my case they dont. the demo page does not use the manual given margins, that is my main concern. With my limited knowledge of css, I think it is because of css files used, but in both cases I think it is the same.

The demo page -> cniska.net/yii-bootstrap/

Its Source, which I think is here -> bitbucket.org/Crisu83/yii-bootstrap/src/177fbd03cc1e/demo/protected/views/layouts/main.php?at=stable