Answered Bootstrap Navbar Logo

I've been playing with MODx Revo and Theme.Bootstrap and am getting along fairly well but ...

... I'd like to put a logo image where the navbar brand would show. And I'm getting nowhere.

To start with I just replaced the text used for the brand link in the standard navbar with an image instead (png). It wasn't quite right, with the logo hanging out of the bottom of the navbar. So I resized the image a little but I can't get it to show properly.

I've trawled through google, Stackoverflow and tried looking a page sources and can't seem to find a straightforward answer. The only answer I found that was fairly simple set the img as a background image for the brand div. I'd rather it behaved as a link back to the home page like a brand name would.

If anyone has done this or has any ideas I'd be very grateful if you could point me in the right direction. The logo itself is a png which is 200 X 46 if that has any specific bearing on anything.

I'm not exactly sure what you're looking for, and I don't use Theme.Bootstrap (but I do use the bootstrap framework). For what it is worth, this is what I have in one of my navbars.

The navbar is 50px high if it's the Bootstrap default. My png is 40px high to ensure it fits properly.

Quote from: gissirob at Aug 25, 2014, 06:07 PM

I'm not exactly sure what you're looking for, and I don't use Theme.Bootstrap (but I do use the bootstrap framework). For what it is worth, this is what I have in one of my navbars.

            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="#"><img class="img-responsive" src="site/img/dragonfly-small.png" alt=""></a>
                    </li>
                    <li>
                        <a href="#content-section-a">About</a>
                    </li>
                    <li>
                        <a href="#content-section-b">Counselling Services</a>
                    </li>
                    <li>
                        <a href="#" data-toggle="modal" data-target="#modal-fees">Fees and Appointments</a>
                    </li>
                    <li>
                        <a href="#" data-toggle="modal" data-target="#modal-contact">Contact</a>
                    </li>
                </ul>
            </div>

The navbar is 50px high if it's the Bootstrap default. My png is 40px high to ensure it fits properly.

I see what you've done there, sticking the logo in as the first menu item on the navbar.
It may have to come to that but I'm looking to use a logo picture as the navbar "brand" element rather than some text.

Thanks for taking the time.

Quote from: sottwell at Aug 26, 2014, 07:12 AM

Is this an extra? If it is, which Bootstrap extra is it? Never mind, I found it.

Looks pretty complicated. That div (navbar_header) contains the logo, and the button that will open/close the menu for small-screen devices. That makes it tricky to deal with.

The <a> tag has this styling:

.navbar-brand {
    float: left;
    font-size: 18px;
    height: 50px;
    line-height: 20px;
    padding: 15px;
}

So any image you put in there will get moved out of position by that 15px padding at the top, bottom and each side. What you will need to do is have a more specific CSS directive override that and get rid of the padding.

.navbar-header .navbar-brand {
    padding: 0;
}

</a>

Thanks, this is very close to what I did. I stumbled around this morning and managed to figure it out. I've copied the css for the bootstrap theme I'm using with Theme.bootstrap and had already made some modifications to it (slight colour changes etc). Then I twigged that "blah.min.css" files are actually css with all the white space removed. So I felt a little braver and have now changed the "navbar-brand" class to play better with an image rather than text.

Had a couple of hours of charging around like a headless chicken though wondering why my image wouldn't show until I figured that an image location is "src=" and not "source=" in a tag. D'oh!!

Got me a syntax highlighted editor now ....

When I use these frameworks, I never edit the .css files they come with. They always have an override (the .css file loaded last), in this case the style-ge-1.0.7.css file, which I will edit, or even create my own to load after all of theirs. I especially don't want to edit any compressed .css files, since if I want to change things back, or make more changes, it's difficult to spot exactly where you need to do the changing.

I understand what you mean but what I've done is work with copies of the base bootstrap theme I want to use (flatly) and just tweaked one or two cosmetic things. Don't worry, I've no intention of trying anything more elaborate than that!
I like the basic bootstrap way of doing things I just wanted a logo image for the brand and a slightly different shade of green for the inverse navbar.