Twitter Bootstrap Question posted in

Inline responsive menu with Twitter Bootstrap 3

I’m trying to create a responsive header in my app with the following elements:

  • a logo (<img>)
  • a search bar (<input>)
  • a link (<a>)
  • two boxes (<div>)

Elements position depends of the screen size:

Medium screens (md-*)

enter image description here

Small screens (sm-*)

enter image description here

Extra small screens (xs-*)

enter image description here

I manage to create each of these layouts, but not with the responsive classes of Bootstrap… Can you help me here?

Here is the simple code I used to make this example:

<div class="container">
  <div class="row vertical-aligned">
    <!-- Logo -->
    <div class="col-md-2 col-sm-12 col-xs-12">
      <img class="logo" src="http://pngimg.com/upload/cocacola_PNG14.png"/>
    </div>
    <!-- Search bar -->
    <div class="col-md-7 col-sm-6 col-xs-12">
      <div class="input-group search-width">
        <input type="text" class="form-control"/>
        <span class="input-group-addon"> 
          <span class="glyphicon glyphicon-search"></span>
        </span>
      </div>
      <a>Launch advanced research...</a>
    </div>
    <!-- Nav boxes -->
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="nav-button">Profil</div>
      <div class="nav-button">Settings</div>
    </div>
  </div>
</div>

JSFiddle here

Tags:

2

Answers


  1. 0

    I hope this answer can help you.
    You can use @media to manage every element size in different layout,
    for example, on laptop layout:

    @media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 

//your css here
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
//your css code here
}

    https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    https://www.youtube.com/watch?v=t526Lt_O7zo

    Login or Signup to reply.
  2. 0

    I solved the issue, i found 2 problems.

    The first one with your md screen, the input field and the paragraph would not stay inline, because of the float property, this would be solved by editing the css of the .input-group class as float left. The second problem for the small screen, is that the div will not stack over one other with a 100% width because you set the css property display: flex and center, I created a media query for the window size of small (<768px) to display those div as inline-block. Please comment for any additional help or problems, the code below should be working fine.

    UPDATE – Solving the additional requirements for the md and sm size:

    For the first problem i added padding top to the id=link, in a media query that will target only md devices, for the second problem with media queries i edited the position of those divs with position relative and left/top attributes.

    Thanks
    Fabrizio Bertoglio 

    <!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link href="main.css" rel="stylesheet" />
    </head>

    <body>
<div class="container">
  <div class="row vertical-aligned">
    <!-- Logo -->
    <div class="col-md-2 col-sm-12 col-xs-12">
      <img class="logo" src="http://pngimg.com/upload/cocacola_PNG14.png"/>
    </div>
    <!-- Search bar -->
    <div class="col-md-7 col-sm-12 col-xs-12">
        <div class="row">
            <div class="input-group col-md-6">
                <input type="text" class="form-control"/>
                <span class="input-group-addon"> 
                  <span class="glyphicon glyphicon-search"></span>
                </span>
            </div>
            <div class="col-md-4" id="link">
                <a>Launch advanced research...</a>
            </div>
        </div>
    </div>
    <!-- Nav buttons -->
    <div class="col-md-3 col-sm-12 col-xs-12" id="boxes">
      <div class="nav-button">Profil</div>
      <div class="nav-button">Settings</div>
    </div>
  </div>
</div>

    Css Code

        </body>
</html>


.vertical-aligned {
    display: flex;
    align-items: center; 
}

.logo {
  width: 100%;
  display: block;
}

.nav-button {
  height: 70px;
  width: 80px;
  border: solid 1px black;
  display: inline-block;
}

.input-group {
    float: left !important;
}


@media (min-width: 992px) { 
    #link {
        padding-top: 6px;
    }
}

@media (max-width: 768px) { 
    .vertical-aligned {
        display: inline-block;
    }
    #boxes {
        max-width: 300px;
        position: relative;
        left: 100%;
        transform: translateX(-179px);
        top: -5%;
    }

    a {
        position: relative;
        top: 49px;
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search