WordPress.org

1. Jeremy
   Member
   Posted 6 months ago #
   

   So,

   I'm using Bootstrap theme to mimic a client's actual website (built from scratch in Bootstrap).

   They have a logo that's 160pixels high, which I've manually inserted into the <nav> element like so

   <div <?php the_bootstrap_navbar_class(); ?>>
   							<div class="navbar-inner">
   								<div class="container">
   									<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
   									<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>
   									<?php if ( the_bootstrap_options()->navbar_site_name ) : ?>
   									<span class="brand"><a href="/"><img src="http://blog.greenlightmusic.com/wp-content/uploads/2012/12/greenlightmusic-logo-large-tm-21.png" alt="The Greenlight Blog" /></a></span>
   									<?php endif;?>

   Because the nav section is now taller than the theme is expecting, this breaks in two ways:

   - The actual menu elements align to the top of the nav and not the bottom

   - The top x number of pixels of the blog body are covered up by the nav menu (which is fixed to the top)

   Might there be a simple way to address both of these issues?

   Many thanks.

   -

2. Jeremy
   Member
   Posted 6 months ago #
   

   bump

3. WPyogi
   Volunteer Moderator
   Posted 6 months ago #
   

   It's really quite difficult to help with CSS issues without seeing the site live.

   If you can't post a link to the site, try using Firebug to work with CSS issues. And be sure that your HTML and CSS code has no errors.

4. Jeremy
   Member
   Posted 6 months ago #
   

   Sorry, the site is blog.greenlightmusic.com

5. WPyogi
   Volunteer Moderator
   Posted 6 months ago #
   

   Changing these margins seems to adjust that:
   

   .navbar .nav {
       display: block;
       float: left;
       left: 0;
       margin: 35px 10px 0 0;
       position: relative;
   }

   then use this to adjust the search box - maybe with a negative top margin?:
   

   .navbar-search {
   
   }

6. Jeremy
   Member
   Posted 6 months ago #
   

   That did it. Thanks WPyogi!

Reply

You must log in to post.