Topic: Nav buttons not behaving as expected in fixed footer
*Expected behavior*I expected buttons in a fixed footer navbar to be responsive (auto resizing whilst remaining on the same line) and full screen width in Angular 8 /MDB 4 as screen width changes.*Actual behavior*As screen narrows, navbar will stack, taking up too much screen space. This contrasts with JQuery Mobile from which I am converting where buttons resize narrower staying on one line down to broswer in Developer mode with iPhone X in portrait mode.*Resources (screenshots, code snippets etc.)*My Jquery Mobile css is "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" and navbar code is as follows:
<!-- Display the navbar-->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li> <a href="./home.php" class="ui-btn ui-corner-all ui-shadow ui-btn-active ui-state-persist">Home</a></li>
<li><a href="./games.php" class="ui-btn ui-corner-all ui-shadow”>Games</a></li>
<li><a href="./teams.php" class="ui-btn ui-corner-all ui-shadow">Teams</a></li>
<li><a href="./venues.php" class="ui-btn ui-corner-all ui-shadow">Venues</a></li>
<li><a href="./results.php" class="ui-btn ui-corner-all ui-shadow">Results</a></li>
</ul>
</div>
My Angular 8 MD Bootstrap 4 css is "css/bootstrap.min.css" and "css/mdb.min.css" and navbar code is as follows:
<mdb-navbar SideClass="navbar navbar-expand-xl navbar-dark grey fixed-bottom">
<!-- Links -->
<ul class="navbar-nav mr-auto container-fluid text-center">
<li class="nav-item active">
<a class="nav-link waves-light" mdbWavesEffect>Home</a>
</li>
<li class="nav-item">
<a class="nav-link waves-light" mdbWavesEffect>Games</a>
</li>
<li class="nav-item">
<a class="nav-link waves-light" mdbWavesEffect>Teams</a>
</li>
<li class="nav-item">
<a class="nav-link waves-light" mdbWavesEffect>Venues</a>
</li>
<li class="nav-item">
<a class="nav-link waves-light" mdbWavesEffect>Results</a>
</li>
</ul>
Dear @AJEsler2019
Try to add this code to your styles.scss:
.navbar-nav {
flex-direction: row;
justify-content: center;
}
Best, Bartosz.
Thanks. I solved it with this: In my scss file, I added
.navbar-nav {
justify-content: space-between;
flex-flow: row nowrap;
}
And in the footer html file I added "nav-pills nav-justified" to the list of buttons per below:
<ul class="navbar-nav container-fluid text-center **nav-pills nav-justified**">
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 8.1.1
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes
Bartosz Termena staff commented 5 years ago
@AJEsler2019
You want exactly the same effect as in JQuery Mobile css?
Best, Bartosz.
AJEsler2019 priority commented 5 years ago
Same behaviour, I am ok if the look of the buttons changes. I want the 5 nav buttons to auto resize (width) along the bottom of the screen as the screen width changes and to never stack on top of each other as the screen width gets narrower (eg to mobile in portrait mode).