Improved www.ttss.krakow.pl
Jacek Kowalski
2017-04-15 0426dc993e4820631f5e341c1b314763fefe549d
Change navbar behavior on mobile devices to lower its height
2 files modified
49 ■■■■ changed files
index.css 27 ●●●●● patch | view | raw | blame | history
index.html 22 ●●●●● patch | view | raw | blame | history
index.css
@@ -43,6 +43,33 @@
    font-size: 21px;
}
/* Change navbar behavior for low media width */
.navbar-nav {
    float: left;
    margin: 0;
}
.nav > li {
    float: left;
}
.navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
}
.navbar-left {
    float: left !important;
}
.navbar-form {
    width: auto;
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
/* Loading animation */
nav.loading {
    background-image: -webkit-linear-gradient(45deg,rgba(0,0,0,.1) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(45deg,rgba(0,0,0,.1) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,transparent 75%,transparent);
index.html
@@ -11,16 +11,20 @@
    <body>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" style="display:inline-block" href="#" data-translate="page_name">TTSS Kraków</a>
                </div>
                <ul class="nav navbar-nav">
                    <li class="navbar-header">
                        <a class="navbar-brand" href="" data-translate="page_name">TTSS Kraków</a>
                    </li>
                    <li>
                        <form class="navbar-form navbar-left">
                            <select class="form-control" id="lang-select">
                                <option value="en">EN</option>
                                <option value="pl">PL</option>
                            </select>
                        </form>
                    </li>
                </ul>
                
                <form class="navbar-form navbar-left">
                    <select class="form-control" id="lang-select">
                        <option value="en">EN</option>
                        <option value="pl">PL</option>
                    </select>
                </form>
                
                <form class="navbar-form navbar-left">
                    <div class="input-group">