Tue, 2015-08-04 22:51
I was just trying my logo to look fancy and i did manage to make it look fancy(making it look oval, drop shadow , displaying only half the circle in view), SEE HERE, now the problem is the height of the navbar somehow seems to be controlled by the size of the navbav-brand img, notice how the navbar has increase abnormally in size and for no apparent reason.
The increase in size occured after i added the following styles to navbar-brand:
.navbar-brand { padding: 0 15px; padding: 50px; border-radius: 50%; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); transform: translateY(-50%); height: auto; }
HTML code:
<nav class="navbar navbar-default navbar-fixed-top navbar-noscroll"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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" id="navbar-brand" href="#"> <img src="http://www.techfume.com/wp-content/uploads/2010/11/logo.jpg" alt="TLC montessori Logo"> </a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#home">Home</a></li> <li><a href="#aboutus">About us</a></li> <li><a href="#programmes">programmes</a></li> <li><a href="#gallery">gallery</a></li> <li ><a href="#contactus">Contact us<span class="sr-only">(current)</span></a></li> </ul> </div><!--/.nav-collapse --> </div> </nav>
If you go to source in chrome and open banner.css and comment out line 77-84 , you'll see the navbar reach its normal size.
Also as i mentioned the img size of the logo seems to effect the size of the navar eg. if you change the size of the img to 10px(ridiculous ! i know), The navbar will be back to its normal size.
So what is it causing my navbar to swell so rediculiously ? I mean can somebody point out the exact reason "WHY" ? i mean i want to know "WHY" this is happening , not just how to solve this problem.
Thank you.
gautam.
Wed, 2015-08-05 19:32
#1
Hi gautamz07, You have some
Hi gautamz07,
You have some unusual layering going on.
Remove float from navbar-brand and use position:absolute instead.
Wed, 2015-08-05 23:33
#2
Tony
position absolute works fine , i know that. what is "unusual layering" ? , I would really like to go to the bottom of this issue , i'll isolate this buggy code further and post another update , i would like to continue this discussion , till i find the real cause.
Thank you for replying btw.
Fri, 2015-08-07 20:33
#3
If you inspect it with
If you inspect it with developer tools you see the #home section is overlaying the navbar.
Also there seems to be a lot of BR's used for positioning.