javascript - Make text in Bootsrap navbar responsive

I asked this question yesterday about how to make my navbar menu change from horizontal to vertically stacked depending on layout but now I notice when I make my text suitable for my large monitor it doesnt work when I shrink the window down. Is there a way I can make my text more responsive? if not do you have another menu approach? Also how can I center the Menu buttons when horizontal?

My JSFiddle

MY CSS

.menu {
    background-color: rgba(0, 0, 0, 0.5);
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
    -ms-filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
}
.menutext {
    color: #FFFFFF;
    font-size: 2em;
    white-space: nowrap;
}
.row.text-center > div {
    display: inline-block;
    float: none;
}
/*-----------------------------------------------------------
            Bootstrap Overrides
-----------------------------------------------------------*/
 * {
    border-radius: 0 !important;
}
.navbar-default {
    background-color: rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    position: relative;
    top: -58px;
    padding: 0px;
    margin: 0px;
    border: 0px;
}
.navbar-default .navbar-nav > .active {
    color: #000;
    background: #FFFFFF;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:link, .navbar-default .navbar-nav > .active > a:visited {
    color: #000;
    background: #ffffff;
}
.navbar-default .navbar-brand {
    color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
    color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #000000;
    background-color: #e4e4e4;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    color: #000000;
    background-color: #e4e4e4;
}
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret, .navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #000000;
    border-bottom-color: #000000;
}
.navbar-default .navbar-nav > .open > a .caret, .navbar-default .navbar-nav > .open > a:hover .caret, .navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #000000;
    border-bottom-color: #000000;
}
.navbar-default .navbar-toggle {
    border-color: #d65c14;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: #e4e4e4;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;
}
/*Style for Bigger Screens*/
 @media (min-width: 768px) {
    .navbar-default a {
        color: white;
    }
    .navbar-default li a:hover {
        color: black;
    }
}
/*Style for Smaller Screens*/
 @media (max-width: 767px) {
    .navbar-default {
        top: 0px;
        background: #808184;
    }
    .navbar-default li {
        border-bottom: 1px;
        border-bottom-style:solid;
        border-color:#FFF;
    }
}

MY HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12" style="background-color:#FABC41; height: 50px;">BAR</div>
    </div>
    <div class="row">
        <div class="col-sm-12" style="padding:0;">
            <img class="img-responsive" src=".jpg" alt="CLI Engage">
        </div>
    </div>
</div>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div>
            <ul class="nav navbar-nav">
                <li class="active"><a class="menutext" href="Home.html">Home</a>

                </li>
                <li><a class="menutext" href="AboutUs.html">About Us</a>

                </li>
                <li class="dropdown"> <a class="dropdown-toggle menutext" data-toggle="dropdown" href="#">Tools<span class="caret"></span></a>

                    <ul class="dropdown-menu">
                        <li><a class="menutext" href="#">Child Progres Monitoring</a>

                        </li>
                        <li><a class="menutext" href="#">Online Courses</a>

                        </li>
                        <li><a class="menutext" href="#">Classroom Observation Tools</a>

                        </li>
                        <li><a class="menutext" href="#">Coaching & Collaboration Tools</a>

                        </li>
                        <li><a class="menutext" href="#">Activities</a>

                        </li>
                        <li><a class="menutext" href="#">Texas Kindergarten Entry Assessment</a>

                        </li>
                    </ul>
                </li>
                <li><a class="menutext" href="#">Parents & Families</a>

                </li>
                <li><a class="menutext" href="#">Parents & Families</a>

                </li>
                <li><a class="menutext" href="#">Calendar</a>

                </li>
                <li><a class="menutext" href="#">Contact Us</a>

                </li>
                <li><a class="menutext" href="#">Help</a>

                </li>
                <li><a class="menutext" href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a>

                </li>
            </ul>
        </div>
    </div>
</nav>

My JSFiddle

MY CSS

.menu {
    background-color: rgba(0, 0, 0, 0.5);
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
    -ms-filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
}
.menutext {
    color: #FFFFFF;
    font-size: 2em;
    white-space: nowrap;
}
.row.text-center > div {
    display: inline-block;
    float: none;
}
/*-----------------------------------------------------------
            Bootstrap Overrides
-----------------------------------------------------------*/
 * {
    border-radius: 0 !important;
}
.navbar-default {
    background-color: rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    position: relative;
    top: -58px;
    padding: 0px;
    margin: 0px;
    border: 0px;
}
.navbar-default .navbar-nav > .active {
    color: #000;
    background: #FFFFFF;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:link, .navbar-default .navbar-nav > .active > a:visited {
    color: #000;
    background: #ffffff;
}
.navbar-default .navbar-brand {
    color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
    color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #000000;
    background-color: #e4e4e4;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    color: #000000;
    background-color: #e4e4e4;
}
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret, .navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #000000;
    border-bottom-color: #000000;
}
.navbar-default .navbar-nav > .open > a .caret, .navbar-default .navbar-nav > .open > a:hover .caret, .navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #000000;
    border-bottom-color: #000000;
}
.navbar-default .navbar-toggle {
    border-color: #d65c14;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: #e4e4e4;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;
}
/*Style for Bigger Screens*/
 @media (min-width: 768px) {
    .navbar-default a {
        color: white;
    }
    .navbar-default li a:hover {
        color: black;
    }
}
/*Style for Smaller Screens*/
 @media (max-width: 767px) {
    .navbar-default {
        top: 0px;
        background: #808184;
    }
    .navbar-default li {
        border-bottom: 1px;
        border-bottom-style:solid;
        border-color:#FFF;
    }
}

MY HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12" style="background-color:#FABC41; height: 50px;">BAR</div>
    </div>
    <div class="row">
        <div class="col-sm-12" style="padding:0;">
            <img class="img-responsive" src="http://travelandwildlifephotography./wp-content/uploads/2014/07/Camping-on-Fraser-Island1.jpg" alt="CLI Engage">
        </div>
    </div>
</div>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div>
            <ul class="nav navbar-nav">
                <li class="active"><a class="menutext" href="Home.html">Home</a>

                </li>
                <li><a class="menutext" href="AboutUs.html">About Us</a>

                </li>
                <li class="dropdown"> <a class="dropdown-toggle menutext" data-toggle="dropdown" href="#">Tools<span class="caret"></span></a>

                    <ul class="dropdown-menu">
                        <li><a class="menutext" href="#">Child Progres Monitoring</a>

                        </li>
                        <li><a class="menutext" href="#">Online Courses</a>

                        </li>
                        <li><a class="menutext" href="#">Classroom Observation Tools</a>

                        </li>
                        <li><a class="menutext" href="#">Coaching & Collaboration Tools</a>

                        </li>
                        <li><a class="menutext" href="#">Activities</a>

                        </li>
                        <li><a class="menutext" href="#">Texas Kindergarten Entry Assessment</a>

                        </li>
                    </ul>
                </li>
                <li><a class="menutext" href="#">Parents & Families</a>

                </li>
                <li><a class="menutext" href="#">Parents & Families</a>

                </li>
                <li><a class="menutext" href="#">Calendar</a>

                </li>
                <li><a class="menutext" href="#">Contact Us</a>

                </li>
                <li><a class="menutext" href="#">Help</a>

                </li>
                <li><a class="menutext" href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a>

                </li>
            </ul>
        </div>
    </div>
</nav>

Share Improve this question edited May 23, 2017 at 12:14 CommunityBot 11 silver badge asked Jul 17, 2015 at 19:00 fred1234 4291 gold badge5 silver badges26 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 6

You can make text responsive using the viewport units. vw, vh, vmin, vmax. These being view width, view height, view minimum, view maximum. These will scale with your screen size. For example: 1vw = 1% of the screen width. Note this is not patible with old browsers.

CSS example

font-size:3.5vmin;

You can use media queries to set font size in mobile view

@media screen and (max-width: 480px) 
{
    body {
        font-size: 1.5em;
    }
}

and to center align buttons, add this class -

.nav li a {
  text-align: center;
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Make text in Bootsrap navbar responsive - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)