3 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 6 years 10 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

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.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi gautamz07, You have some

Hi gautamz07,
You have some unusual layering going on.
Remove float from navbar-brand and use position:absolute instead.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 6 years 10 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

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.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

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.