retarded
March 2, 2017, 4:14pm
1
Hi All
I’m a newbie to all this (web development), so please bear with me.
I am trying to create a simple page with top and side nav bars. However the side nav overlaps the top nav bar as shown in the attached image. My main.php layout file is shown below. How do I fix this, should this work out the box without any modifications to source/css ?
<?php
/* @var $this \yii\web\View */
/* @var $content string */
use yii\helpers\Html;
use kartik\sidenav\SideNav;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use app\assets\AppAsset;
AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
<meta charset="<?= Yii::$app->charset ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?= Html::csrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>
<div class="wrap">
<?php
NavBar::begin([
'brandLabel' => 'My Company',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse navbar-fixed-top',
],
]);
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right'],
'items' => [
['label' => 'Home', 'url' => ['/site/index']],
['label' => 'About', 'url' => ['/site/about']],
['label' => 'Contact', 'url' => ['/site/contact']],
],
]);
echo SideNav::widget(
[
'type' => SideNav::TYPE_PRIMARY,
'items' => [
['label' => 'Test1', 'url' => ['/test1']],
['label' => 'Test2', 'url' => ['/test2']],
['label' => 'Test3', 'url' => ['/test3']],
]
]);
NavBar::end();
?>
<div class="container">
<?= Breadcrumbs::widget([
'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
]) ?>
<?= $content ?>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="pull-left">© My Company <?= date('Y') ?></p>
<p class="pull-right"><?= Yii::powered() ?></p>
</div>
</footer>
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>
Thanks
jacmoe
March 2, 2017, 4:17pm
2
You actually put the sidenav inside of the navbar
retarded
March 2, 2017, 4:36pm
3
Haha thanks jacmoe, I see that now, where should it go, after the breadcrumbs ?, i have added my css from site.css for completeness
.kv-sidenav {
width: 15%;
text-align: center;
position: fixed;
left: 0;
background: black; /* testing */
}
Thanks
jacmoe
March 2, 2017, 9:13pm
4
You shouldn’t need to modify the css for the sidenav.
Did you visit the sidenav page?
http://demos.krajee.com/widget-details/sidenav
It has a demo too:
http://demos.krajee.com/sidenav-demo/profile/default
My advice:
Please disable/remove the css for your sidebar, and make it work.
Then, when it works, and you want to style it, you can add the css back.
retarded
March 3, 2017, 8:50am
5
Hi jacmoe
Yes I have looked at the docs, I have disabled the css. I have attached a screenshot if you would so kindly have a look. As you can see my content and menu bars occupy the centre of the viewport.
How can I make the menus and content occupy the entire screen, in a similar way to the Yii2 docs webpage (if that makes sense)
My new code is below.
<?php
/* @var $this \yii\web\View */
/* @var $content string */
use yii\helpers\Html;
use kartik\sidenav\SideNav;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use app\assets\AppAsset;
AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
<meta charset="<?= Yii::$app->charset ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?= Html::csrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>
<div class="wrap">
<?php
NavBar::begin([
'brandLabel' => 'My Company',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse navbar-fixed-top',
],
]);
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right'],
'items' => [
['label' => 'Home', 'url' => ['/site/index']],
['label' => 'About', 'url' => ['/site/about']],
['label' => 'Contact', 'url' => ['/site/contact']],
],
]);
NavBar::end();
?>
<div class="container">
<?= Breadcrumbs::widget([
'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
]) ?>
<div class='col-lg-2' >
<?php
echo SideNav::widget(
[
'type' => SideNav::TYPE_PRIMARY,
'items' => [
['label' => 'Test1', 'url' => ['/test1']],
['label' => 'Test2', 'url' => ['/test2']],
['label' => 'Test3', 'url' => ['/test3']],
]
]);
?>
</div>
<div class='col-lg-9' >
<?= $content ?>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="pull-left">© My Company <?= date('Y') ?></p>
<p class="pull-right"><?= Yii::powered() ?></p>
</div>
</footer>
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>
Thanks once again
jacmoe
March 3, 2017, 8:54am
6
Actually, that looks fine
I don’t have the time to check your markup, but the sidebar is at the right spot.
Your problem is that the width of the container is smaller than you would like it to be, so you need to tweak it.
Since that theme uses Bootstrap, check out the docs on www.getbootstrap.com
jacmoe
March 3, 2017, 9:18am
7
Try changing the class for the container to container-fluid and see what happens.
But check out the Bootstrap docs - they are your friend.
retarded
March 3, 2017, 1:53pm
8
Thanks jacmoe.
I’m gonna have to learn a bit of html me thinks
I did try container-fluid, which did shift everything to the left, but I lost the breakcrumbs
Thanks
