Topic: newbie nav bar questions
I'm a MD for Angular and Angular newbie and have a couple of questions about how to space and included content in an Angular navbar
a). Spacing and alignment
My I want to group my navbar content into four distinct aligned groups:
- A set of 5 'ul/li' menu items that are left aligned
- A search form
- A 'Sign up' 'ul/li' menu item
- A login form that has a user id and password input controls - that is right aligned
How do I setup the nav bar alignment so that the 'Search' and 'Sign up' elements are spaced equally between the left and right aligned groups?
Also, what's the best way of inserting a horizontal gap between two elements in a navbar?
b). Include multiple forms in nav bar?
Is it legit to include multiple forms in a nav bar? I want to include a 'search' form and a login form as distinct entries in the nav bar
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.8.1
- Device: Windows PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 5 years ago
You can take a look at the 'custom content' section in the navbar documentation and just replace the current elements with the one you need: https://mdbootstrap.com/docs/angular/navigation/navbar/#additional-content
I'm afraid that there may be some problems with the customization of the alignment of the specific element group. We already have plans to make the navbar more customizable.
Could you provide more details for the second question?
davout commented 5 years ago
What'a the simplest way of adding a space between different menu items on a navbar?
Arkadiusz Idzikowski staff commented 5 years ago
Currently the menu items are aligned with flexbox. You can for example add
margin-rightstyle to the.nav-itemclass to increase the spacing between the items.mdb-navbar .nav-item { margin-right: 10px }davout commented 5 years ago
Sure... A more holistic approach would be to extend your support for navbars to include support for 'empty'/null menu items that would equate to a space between menu items