CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
xan
xan

Reputation: 4696

Adjusting brand logo for different devices in Bootstrap 3

I have the following code in my setup. The logo appears normal on my desktop, but on my phone I see two logos: 1 normally as I want it (top right) and another in the top-middle.

<div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <a href="http://example"><img class="logo" src="<?php echo base_url();?>resources/example.png"></a>
   </button>
   <a class="navbar-brand" href="http://example.com"><img src="<?php echo base_url();?>resources//example.png"></a>
</div>

Upvotes: 0

Views: 263

Answers (2)

samtodd
samtodd

Reputation: 539

That's because you have the same image duplicated showing for when you're on a mobile device.

This code :-

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <a href="http://example"><img class="logo" src="<?php echo base_url();?>resources/example.png"></a> </button>

Is for the icon that shows to open the menu on a navbar when on a mobile device. It's usually a burger icon (http://cdn.css-tricks.com/wp-content/uploads/2012/10/threelines.png).

If you change the markup above to this :- 

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

Then it will go back to the normal burger icon. Unless you're wanting your logo to be the menu button? If so, you'll need to make a media query in CSS to not show the other logo when on a mobile device. But I wouldn't suggest this, as people wouldn't know that clicking the logo on a mobile device will actually show a navigation menu..

Hope this helps.

Upvotes: 1

bazeblackwood
bazeblackwood

Reputation: 1204

Apply .hidden-xs class to the logo you want to hide on small devices. You might need to apply both that and the -sm class as well, depending on the breakpoint:

<img class="logo hidden-xs hidden-sm" src="<?php echo base_url();?>resources/example.png">

Link to the relevant portion of documentation: http://getbootstrap.com/css/#responsive-utilities

Upvotes: 2

Related Questions