Clever Geek Handbook

Hide bot navbar and only show centered when navbar collapses

Maybe the brand navbar button is not the way to do this, but when I feel like when the navbar crashes and displays the toggle button, I would like some text or a link to the home page to show.

Like this: enter image description here

I want the brand to be hidden when the navbar doesn't crash. Is it possible?

+3


source to share


3 answers


This is fairly easy to do using some bootstrap utility classes. By default, the navbar collapses to XS (<768px).

To make something only show up when you get to XS, just add a visible utility class for that size.

<div class="visible-xs"></div>


If you only want to show something when you are not in XS as a hidden utility class for that size.

<div class="hidden-xs"></div>

More information can be found here: http://getbootstrap.com/css/#responsive-utilities-classes

+9


source


To get both results, showing the brand only in the folded nav and centering it (according to the question title), use the Bootstrap default nav bar code example:

<a class="navbar-brand" href="#">Brand</a>

edit it to:



<a class="navbar-brand visible-xs-block text-center" style="float: none;" href="#">Brand</a>

Two notes:

  • visible-xs-block

    as Marcelo said, only sets visibility on xs devices where the navbar collapses by default; the suffix is -block

    needed as in bootstrap v3.2.0 (simple is visible-xs

    now deprecated);
  • style="float: none;"

    overrides a float: left;

    class navbar-brand

    that will prevent the class from working text-center

    .
+1


source


Take a look at this script for an example. Change the permission for the media query if necessary. You may need to edit your navbar media queries to get the match you want.

CSS

@media (max-width:1024px){
    .navbar-header {
        width: 100%;
        text-align: center;
}
    .navbar-brand {
        display: block;
        float: none;
    }
}

@media (min-width: 1024px){
    .navbar-brand {
        display: none;
    }
}
0


source






More articles:


All Articles