The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

The Bootstrap
[resolved] Tall Logo image in Nav Menu - Push Content Down? (6 posts)

  1. Jeremy
    Posted 3 years ago #


    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>
    									<?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
    Posted 3 years ago #


  3. WPyogi
    Forum Moderator
    Posted 3 years 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
    Posted 3 years ago #

    Sorry, the site is blog.greenlightmusic.com

  5. WPyogi
    Forum Moderator
    Posted 3 years 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
    Posted 3 years ago #

    That did it. Thanks WPyogi!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic