Nav buttons not behaving as expected in fixed footer

Topic: Nav buttons not behaving as expected in fixed footer

AJEsler2019 priority asked 4 years ago

*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>

Bartosz Termena staff commented 4 years ago

@AJEsler2019

You want exactly the same effect as in JQuery Mobile css?

Best, Bartosz.

AJEsler2019 priority commented 4 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).

Add comment

Bartosz Termena staff answered 4 years ago

0 0 Best answer

Dear @AJEsler2019

Try to add this code to your styles.scss:

.navbar-nav {
  flex-direction: row;
  justify-content: center;
}

Best, Bartosz.

Add comment

AJEsler2019 priority answered 4 years ago

1 0 Best answer

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**">

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

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

AJEsler2019

62Support score
9Questions 3Answers 4Snippets