SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bootstrap 3 Responsive Logo Image

    Let's say that I have a logo image which is 400px in width and it goes into the top navigation bar similar to this example site:

    http://startbootstrap.com/templates/logo-nav

    But when resizing the browser window to be a mobile width in size the 400px logo image drops beneath the navigation. Is there any way to keep a responsive logo on the top left side of the screen in Bootstrap 3, to be as big as it can be (up to it's maximum 400px) while still retaining it in the top left corner of the screen? And when resizing the browser window to be smaller it still stays to the left of the navigation (shrinking responsively if necessary) and to the left side of the mobile menu bar too? Also, let's say that I add some more navigation buttons, will any CSS code need to be altered when that is done or will the responsive logo keep itself to the left side of the screen and not drop below the navigation bar?

    Hope that makes sense! And I'm hoping this can be achieved in a responsive fashion for Bootstrap 3.
    Thanks,
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You'll have to put up a demo if you want specific help but using that page you linked to as an example you can add this code:

    Code:
    .logo-nav{display:block;width:100%;}
    .logo-nav img{width:400px;max-width:100%}
    Use css terminal or Firebug to add that code to the live site to test it out.

    That will leave the logo at 400px width until there isn't room and then it will scale smaller.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •