I've got a problem with the slideshow (JS FlexSlider) container on my responsive Joomla 3 site.
On loadup the main content is loaded first and since the slideshow is still loading, the rest of the site is on top.
When the slideshow is ready and running, everything gets pushed downwards where it belongs.
Now since the site is responsive I can't just put a min-height to the slideshows container, since this value is changing according to the viewpoint.
Any tips on how to fix that?
my site
The div class is called "bigimage" and it is placed outside any other container to have it displayed in full width.
</head>
<body id="<?php echo ($itemid ? 'itemid-' . $itemid : ''); ?>">
<!-- Begin Navbar-->
<?php if ($this->countModules('position-9')): ?>
<div class="navbar navbar-inverse navbar-fixed-top">
<!-- navbar-inverse navbar-fixed-top -->
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#"><?php echo $sitename ?></a>
<div class="nav-collapse collapse">
<jdoc:include type="modules" name="position-9" style="none" />
</div>
</div>
</div>
</div><!--End navbar-->
<?php endif; ?>
<?php if ($this->countModules('position-5')): ?>
<div class="bigimage">
<jdoc:include type="modules" name="position-5" style="none" />
<div class="clearfix"></div>
</div><!--End Bigimage-->
<?php endif; ?>
<div class="container">
<!-- Begin Header-->
<div class="header">
<div class="header-inner">
You can set min-height for .bigimage for different resolutions with media queries.
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) {
.bigimage{
min-height: 300px;
}
}
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) {
.bigimage{
min-height: 500px;
}
}
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) {
.bigimage{
min-height: 800px;
}
}
as i see it hides all elements before it starts to run. try set .flexslider .slides > li:first-child { display: block } to display first element of the slider while page is loading. maybe this workaround will work
Related
Here is Photo viewer laravel project. it worked well. but I'm having problem about image layout.
This below image is my current photo gallery page. As you can see images are not line. looks not good.
Becase each uploaded photo size are diffrent width and height so this happens I guess.
I'm using Laravel. And this is fancybox.
and I'm using this gentleman's source code.
https://www.itsolutionstuff.com/post/laravel-5-image-gallery-crud-example-from-scratchexample.html
I had been changing below css parameter but I couldn't fix.
Could you teach me code to fix situation please?
CSS of index.blade.php
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- References: https://github.com/fancyapps/fancyBox -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
.gallery
{
display: inline-block;
margin-top: 20px;
}
.form-image-upload{
background: #e8e8e8 none repeat scroll 0 0;
padding: 15px;
}
Image output of Index.blade.php
<div class='list-group gallery'>
#if($images->count())
#foreach($images as $image)
<div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
<a class="thumbnail fancybox" rel="ligthbox" href="images/{{ $image->image }}">
<img class="img-responsive" alt="" src="images/{{ $image->image }}" />
<div class='text-center'>
<small class='text-muted'>No.{{ $image->id }}</small>
</div> <!-- text-center / end -->
</a>
</div> <!-- col-6 / end -->
#endforeach
#endif
</div>
Why you don't use Image Width and Height just like this
<img class="img-responsive" alt="" src="images/{{ $image->image }}" height="48" width="48"/> // Here 48 in pixel size
You can add a break line every 4 pictures to make it look cleaner - assuming you are using Bootstrap 4:
#foreach($images as $image)
<div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
<a class="thumbnail fancybox" rel="ligthbox" href="images/{{ $image->image }}">
<img class="img-responsive" alt="" src="images/{{ $image->image }}" />
<div class='text-center'>
<small class='text-muted'>No.{{ $image->id }}</small>
</div> <!-- text-center / end -->
</a>
</div> <!-- col-6 / end -->
#if ($image->number % 4 == 0)
<div class="w-100"></div>
#endif
#endforeach
my website has connected to internet network, but i have a problem to my picture on that carousel. that carousel only display one picture (and that picture always automated change the size, from small to bigger). I want to display all picture on my carousel. how to fix it ?
and this is my code
<!-- BEGIN .om-slide-1 -->
<?php foreach($keyslide as $kim){?>
<div class="om-slide om-slide-2 isactive">
<div class="om-layer om-layer-1" data-animation-in="fadeIn" data-animation-out="fadeOut" data-delay="0" data-delayout="300" style="top: 0px; left: 0px; width: 100%;">
<img src="<?php echo base_url();?>assets/uploads/produk/1e5d3-cupgentong.jpg">/<?php echo $kim->img;?>&w=500&h=400" alt="<?php echo $kim->judul;?>" />
</div>
<div class="om-layer om-layer-2" data-animation-in="fadeIn" data-animation-out="fadeOut" data-delay="200" data-delayout="0" style="top: 190px; left: 80px;">
<!-- <h3><a class="button" href="<?php echo $kim->url;?>"><?php echo $kim->judul;?></a></h3> -->
</div>
<div class="om-layer om-layer-3" data-animation-in="fadeIn" data-animation-out="fadeOut" data-delay="500" data-delayout="0" style="top: 260px; left: 80px;">
<!-- <h6><?php echo $kim->tagline;?></h6> -->
</div>
<!-- END .om-slide-2 -->
</div>
<?php } ?>
<?php foreach($slide as $im){?>
<div class="om-slide om-slide-2">
<div class="om-layer om-layer-1" data-animation-in="fadeIn" data-animation-out="fadeOut" data-delay="0" data-delayout="300" style="top: 0px; left: 0px; width: 100%;">
<img src="<?php echo base_url();?>assets/uploads/produk/b4d9b-cupwafer.jpg">/<?php echo $kim->img;?>&w=1000&h=400" alt="<?php echo $kim->judul;?>" />
</div>
<div class="om-layer om-layer-2" data-animation-in="fadeIn" data-animation-out="fadeOut" data-delay="200" data-delayout="0" style="top: 190px; left: 80px;">
<!-- <h3><a class="button" href="<?php echo $im->url;?>"><?php echo $im->judul;?></a></h3> -->
</div>
<div class="om-layer om-layer-3" data-animation-in="fadeIn" data-animation-out="fadeOut" data-delay="500" data-delayout="0" style="top: 260px; left: 80px;">
<!-- <h6><?php echo $im->tagline;?></h6> -->
</div>
<!-- END .om-slide-2 -->
</div>
<?php } ?>
<!-- END .omnomnom-slider-inner -->
</div>
<div class="om-slider-pager">
1
2
<input type="text" class="dial" data-min="0" data-max="100" data-displayInput="false" data-readOnly="true" data-fgColor="#5d4d43" data-height="17" data-width="17" data-thickness="0.24" data-bgColor="rgba(0,0,0,0.1)">
</div>[enter image description here][1]
I'm using PHP in Codeigniter and had a similar problem. I fixed it with the following steps:
1) Use the Bootstrap carousel found here.
2) Click "try it" under one of the carousel examples and then grab the two script lines from the header and put them into your header.
Now all of my pictures are displaying properly.
I'm newbee in Boostrap and I try since 2 days to manage Boostrap carouseul mode.
My images in slide are Disproportionate when I resize navigator ! I was unable to find solution. I try many solution in CSS but I naver finnd solution.
I use default CSS parameter, present in carousel mode. I try carousel mode from w3schools (image are not corrupt when we resize navigator).
My CSS
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
margin: auto;
}
My HTML
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="media/image1.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Secucampus.com</h1>
<p class="trans"> bla bla</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Plus d'informations</a></p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="media/image2.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Secucampus.com</h1>
<p class="trans">bla bla</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Contactez nous</a></p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="media/image3.jpg" alt="">
<div class="container">
<div class="carousel-caption" style="text-align:left">
<h1>bla </h1>
<p></p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Contenu des cours</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
The result when I resize image to Smarphone mode :
Thank for your help
Regard
Edit : Banzay :
I try to remove it and the result decrease image in hignht when I reduce the width of the navigateur.
I am completely new to bootstrap. And I have made an website in Bootstrap 3.0.
the website was working properly on my laptop. But when I hosted that website some of the images are not loaded in webpage. And further when i try to open the website in mobile device the carousel images are not fitted to carousel i mean it leaves some blank space it does not cover the entire carousel space. And while loading the website on the mobile device the background image is also not fully fitted to screen. Please help me out I am totally stuck. my website url is WWW.krishzone.com
and my code is
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Krishh Kidss Zone</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<link href="css/lightbox.css" rel="stylesheet">
<link href="css/navbar.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body style="background: url(../img/background1.png) no-repeat center center fixed"
style="-webkit-background-size: cover"
style="moz-background-size: cover"
style="-o-background-size: cover"
style="background-size: cover">
<div id="custom-bootstrap-menu" class="navbar navbar-default navbar-fixed-top " role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Krishh Kidss Zone</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-right">
<li>About Us
</li>
<li>Why Krishh Kidss
</li>
<li>Admissions
</li>
<li>Events
</li>
<li>Gallery
</li>
<li>Achivements
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Header Carousel -->
<header id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="../img/school.jpg" alt="learn" style="max-width:100%" style="height:auto" class="img-responsive">
<div class="carousel-caption">
<h2>Krishh Kidss Zone...</h2>
</div>
</div>
<div class="item">
<img src="../img/learning.JPG" alt="Fun" style="max-width:100%" style="height:auto" class="img-responsive">
<div class="carousel-caption">
<h2>Where Learning is...</h2>
</div>
</div>
<div class="item">
<img src="../img/playing.jpg" alt="play" style="max-width:100%" style="height:auto" class="img-responsive">
<div class="carousel-caption">
<h2>Fun</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
<!-- Page Content -->
<div class="container">
<!-- Marketing Icons Section -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Krishh Kidss Zone
</h1>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Vision</h4>
</div>
<div class="panel-body">
<p>
"To make your child grow into complete personality and develop the strength to meet the challenges ahed."
<br/>
<br/>
<br/>
<br/>
</p>
<div class="text-center">
Read More
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4>About Us</h4>
</div>
<div class="panel-body">
<p>We have started Krishh Kidss Zone pre school in 11th February 2010 with motto to give best primary education to children with out any burden. We adopt the simple and effective slogan “Where learning is Fun” , where we always focus on the children’s learning with the help of fun.</p>
<div class="text-center">
Read More
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Events</h4>
</div>
<div class="panel-body">
<p>
We celebrate almost each and every festivals and days as a part of our curriculam. That will help the children to know and understand the impotance of the festivals and days. We try to fill the colours in education by celebrating such events.
<br/>
<br/>
</p>
<div class="text-center">
See More
</div>
</div>
</div>
</div>
</div>
<!-- Features Section -->
<!-- /.row -->
<hr>
<!-- Call to Action Section -->
<div class="well">
<div class="row">
<div class="col-md-8">
<h3> Contact Us:</h3>
<p>Adress:<br/>
18 Sarita Vihar,<br/>
Opp. Kartavya Bunglows,<br/>
Anand Nadiad Road,<br/>
Lambhvel, 387-310<br/>
Anand, Gujarat</p><br/>
</div>
<div class="col-md-4">
<p>Contact Details<br/>
Ph.No. +91 99799 64200 <br/>
Like Us On Facebook
<ul class="list-unstyled list-inline list-social-icons">
<li>
<i class="fa fa-facebook-square fa-2x"></i>
</li>
</ul></p>
<p>Copyright © Krishh Kidss Zone 2015</p>
<p>Developed By: Shree InfoTech Ltd.</p>
</div>
</div>
</div>
<hr>
<!-- Footer -->
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/lightbox.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</body>
You have multiple div and nav tags that are duplicates or out of place completely. Your images inside the carousel contain multiple style tags style="max-width:100%" style="height:auto" which should be style="max-width:100%; height:auto;" but are unnecessary and should go into a stylesheet if you do need to apply rules.
This example should provide a better starting point for you.
$('.carousel').carousel({
interval: 5000 //changes the speed
})
body {
background: url(http://placehold.it/1350x1050/5E58D1/fff/) no-repeat center center fixed;
background-size: cover;
}
html,
body {
height: 100%;
}
.navbar.navbar-default {
font-size: 16px;
background-color: #3A368C;
border-width: 0px;
border-radius: 0px;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #FAF2F2;
background-color: #161263;
}
.navbar.navbar-default .navbar-nav > li > a:hover {
color: #FAF2F2;
background-color: #3C3880;
}
.navbar.navbar-default .navbar-brand,
.navbar.navbar-default .navbar-brand:hover {
color: #fff;
}
.navbar.navbar-default .navbar-toggle {
border-color: #5E58D1;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
.carousel,
.item,
.active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.carousel.fade {
opacity: 1;
}
.carousel.fade .item {
-moz-transition: opacity ease-in-out .7s;
-o-transition: opacity ease-in-out .7s;
-webkit-transition: opacity ease-in-out .7s;
transition: opacity ease-in-out .7s;
left: 0 !important;
opacity: 0;
top: 0;
position: absolute;
width: 100%;
display: block !important;
z-index: 1;
}
.carousel.fade .item:first-child {
top: auto;
position: relative;
}
.carousel.fade .item.active {
opacity: 1;
-moz-transition: opacity ease-in-out .7s;
-o-transition: opacity ease-in-out .7s;
-webkit-transition: opacity ease-in-out .7s;
transition: opacity ease-in-out .7s;
z-index: 2;
}
.carousel-control {
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav id="#custom-bootstrap-menu" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> Krishh Kidss Zone</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-right">
<li>About Us
</li>
<li>Why Krishh Kidss
</li>
<li>Admissions
</li>
<li>Events
</li>
<li>Gallery
</li>
<li>Achivements
</li>
<li>Contact Us
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel fade">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://desktop-pictorials.com/SingleScreen/SinglePage01/Island002-1920x1080.jpg');"></div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://img.phombo.com/img1/photocombo/4448/The_Best_HD_HQ_Hi-Res_Wallpapers_Collection_-_Cityscape_by_tonyx__145_pictures-61.jpg_HDTV_monaco_1920x1080.jpg');"></div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('https://interfacelift.com/wallpaper/7yz4ma1/01407_harboursunset_1920x1080.jpg');"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span>
</a>
</header>
<div class="container">
<!-- Marketing Icons Section -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"> Krishh Kidss Zone </h1>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Vision</h4>
</div>
<div class="panel-body">
<p>"To make your child grow into complete personality and develop the strength to meet the challenges ahed."
<br/>
<br/>
<br/>
<br/>
</p>
<div class="text-center"> Read More
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4>About Us</h4>
</div>
<div class="panel-body">
<p>We have started Krishh Kidss Zone pre school in 11th February 2010 with motto to give best primary education to children with out any burden. We adopt the simple and effective slogan “Where learning is Fun” , where we always focus on the children’s
learning with the help of fun.</p>
<div class="text-center"> Read More
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Events</h4>
</div>
<div class="panel-body">
<p>We celebrate almost each and every festivals and days as a part of our curriculam. That will help the children to know and understand the impotance of the festivals and days. We try to fill the colours in education by celebrating such events.
<br/>
<br/>
</p>
<div class="text-center"> See More
</div>
</div>
</div>
</div>
</div>
<!-- Features Section -->
<!-- /.row -->
<hr>
<!-- Call to Action Section -->
<div class="well">
<div class="row">
<div class="col-md-8">
<h3> Contact Us:</h3>
<p>Adress:
<br/>18 Sarita Vihar,
<br/>Opp. Kartavya Bunglows,
<br/>Anand Nadiad Road,
<br/>Lambhvel, 387-310
<br/>Anand, Gujarat</p>
<br/>
</div>
<div class="col-md-4">
<p>Contact Details
<br/>Ph.No. +91 99799 64200
<br/>Like Us On Facebook
<ul class="list-unstyled list-inline list-social-icons">
<li> <i class="fa fa-facebook-square fa-2x"></i>
</li>
</ul>
</p>
<p>Copyright © Krishh Kidss Zone 2015</p>
<p>Developed By: Shree InfoTech Ltd.</p>
</div>
</div>
</div>
<hr>
<!-- Footer -->
</div>
<!-- /.container -->
OK I have accomplished this without bootstrap
<nav id="active">
<ul>
<li>Home</li>
<li>Ministries</li>
<li>Bylaws</li>
<li>About Us
<ul>
<li>History of RK</li>
<li>Mission Statement</li>
<li>Prayer Request</li>
</ul>
</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
<div class="img"></div>
</nav>
I am wanting to convert the current site to bootstrap and I am unable to find exactly how to do this. The image basically is floating in the middle of the navigation, that way it will allow me to make the image slightly larger in height that the navbar. Currently this is how I have it, the image isn't floating in the center it is styled there. which isnt the way I want it.. again like the image to be bigger than the menu height wise.
<div class="span12">
<nav class="navbar nav-center navbar-inverse">
<div class="navbar-inner">
<ul class="nav">
<li>Home</li>
<li>Minitries</li>
<li>Bylaws</li>
</ul>
<ul class="nav pull-right">
<li>About Us</li>
<li>Testimonies</li>
<li>Contact Us</li>
</ul>
<div class="navbar">
<img src="images/logo.png" width="115" height="135" alt=""/>
</div>
</div>
</nav>
</div>
****Ok quick edit... If you view this site. www.risenkings.com, if you notice that the logo image is floating in the middle of navbar. This is what I am trying to accomplish within bootstrap.
I would start by using just the standard navbar markup. Links will automatically float left, so your Home, Ministries and Bylaws can just be wrapped in a ul with 'nav navbar-nav' classes. For the remaining links, you'll want to wrap them in a separate ul adding the navbar-right class as well.
You can repurpose the navbar-brand class for your logo. Remembering that Bootstrap is a mobile first framework, you'll probably want to first style your logo to be on the left within the navbar for your "collapsed" menu style. I just sized your logo generally and adjusted the padding. You can tweak it how you like.
Once the menu is not collapsed (on viewports that are greater than 768px), you'll need to use a media query to position your navbar, and position and center your logo. Using position absolute on the wrapping navbar-brand with the right and left properties to 0, then setting the img inside to display block with margin auto is one way to do this. The demo shows the basic results.
DEMO
HTML:
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://www.risenkings.com/images/logo.png" alt="logo" /></a>
</div>
<div class="collapse navbar-collapse" id="navcollapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Minitries</li>
<li>Bylaws</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
About Us
<ul class="dropdown-menu" role="menu">
<li>History</li>
<li>Mission</li>
<li>Requests</li>
</ul>
</li>
<li>Testimonials</li>
<li>Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
CSS:
.navbar-brand {
padding-top: 2px;
}
.navbar-brand>img {
width: 3em;
}
#media (min-width: 768px) {
.navbar {
margin-top: 4em;
}
.navbar-brand {
position: absolute;
top: -2em;
left: 0;
right: 0;
}
.navbar-brand>img {
width: 6em;
margin: 0 auto;
display: block;
}
}