Align navigation bar using Angular Material

Trying to center my navbar has been a struggle for me. I attempted using 'layout-align='space-between center' but it's not taking up 100% width and is acting more like an inline element.

I've been following the documentation closely, but nothing seems to be working. Here is the code snippet:

<body ng-app="PetApp" layout='row'>

<div layout="row" flex>
  <md-nav-bar layout-fill aria-label='Main Menu' md-selected-nav-item="currentNavItem">
      <md-nav-item md-nav-sref='#inicio' name="inicio">Inicio</md-nav-item>
      <md-nav-item md-nav-sref="#conheca" name="conheca">O Aplicativo</md-nav-item>
      <md-nav-item md-nav-href="#cadastro" name='cadastro'>Cadastre-se</md-nav-item>
      <md-nav-item md-nav-href="#contato" name='contato'>Contato</md-nav-item>
  </md-nav-bar>
</div>

<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-material/angular-material.min.js"></script>
<script src="node_modules/angular-animate/angular-animate.min.js"></script>
<script src="node_modules/angular-aria/angular-aria.min.js"></script>

<script type="text/javascript">
  angular.module('PetApp', ['ngMaterial']);
</script>

Your help is greatly appreciated!

Answer №1

To align md-navbar in the center, utilize layout options

  <div layout="row" layout-align="center" flex="70">

See Demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refreshing the page triggers a 404 error, indicating that the parameter is being passed as a template

Encountering difficulties with my angular routes when a page is refreshed by a user or accessed directly through the browser, rather than navigating via internal links on the site. thing.js - an angular factory .factory( 'Things', ['$resou ...

Heroku: Showcasing a unique page during the application's startup process

Would it be feasible to showcase a static HTML page while the dyno is starting up, just like how a custom page can be shown during errors or maintenance mode? The size of my app's slug is quite significant, leading to a startup time of almost 50 seco ...

A dynamic 2-column website design featuring a mobile-friendly layout and an adaptable image

After searching through numerous resources on the topic, I have yet to find a solution to this particular challenge. Is it feasible to create a webpage layout with a text column on the left and an image column on the right that will seamlessly transition i ...

What is the proper syntax for creating a layout with DIV and CSS?

Is there a way to create a master page for asp.net that includes 3 sections using div elements? I want to split the window into a left pane for tree view navigation, a top banner type div, and a main content window under it where child pages will be loaded ...

What is the best way to ensure that my header remains responsive across all devices and screen sizes?

The header is not responding despite inputting width: 100%. How can I ensure that the header is responsive on all browsers, as well as iPads and phones? .head-wrap { background: url(http://envisionmediallc.com/prodigy/wp-content/uploads/2014/02/We-are-p ...

Issue with hiding div using jQuery's length option

I'm currently using Drupal 7.0 along with the Galleria Javascript Image Gallery in fullscreen theme. My theme includes two navigation buttons, and here is the CSS code for them: .galleria-image-nav { height: 159px; opacity: 0.8; position: fixed ...

Issues arising from ng-bind-html not functioning correctly within ui-view

Currently, I am in the process of creating an angular application using angular 1.4 along with ui.router 0.2.8. To display error messages during form validation, I have been utilizing ng-bind-html. However, I seem to be encountering some difficulties as it ...

Angular. The MatSelectionListChange event is returning an undefined value

I am attempting to retrieve the value of a changed element in a list, but I always get an undefined value while the checked property seems to be correct. HTML <div> <mat-selection-list #costUnits [(ngModel)]="selectedCostUnits" ...

Personalize the color of tags in streamlit

As a newcomer to streamlit, I am experimenting with creating an application that incorporates multiple tag objects. By default, the tags are displayed in red, but I would like to customize the colors for each tag based on its category. For example, I want ...

Can Bootswatch be installed using a package manager?

I have recently launched a small asp.net core website. Right now, all JS/CSS imports are from NPM and I am using webpack to bundle them together. Instead of sticking with the standard bootstrap template, I wanted to switch to bootswatch paper, but unfortu ...

Using Responsive Design with Bootstrap and Media Queries

As a beginner in front-end development, I have recently learned about media queries and their functionality. Having previously studied Bootstrap, I can't help but wonder if media queries are actually necessary. After all, Bootstrap seems to offer simi ...

The appearance of the page varies when viewed on different computers using the same version of Firefox

Previously, I posed a question with a touch of irony regarding Firefox without providing an example. As a result, my question was downvoted and I had to request its removal. Now, I have an example illustrating the issue at hand. It took some time to clean ...

Customizing jquery mobile styling

I am dealing with a table where the challenge lies in aligning the text to center in the header. .info-header { font-size: small; text-align: center; } Despite setting the alignment, the row still inherits left alignment from jQuery mobile. Seeking ...

One way to change the cursor CSS property is by dynamically altering it based on scrolling behavior. This involves modifying the cursor property when scrolling

I'm attempting to adjust the cursor property within an Angular function. The issue I'm facing is that when I begin scrolling the webpage, the cursor changes to a pointer, but when I stop scrolling, it remains as a pointer. I've attempted to ...

The method of altering a menu link in WordPress using jQuery varies according to whether the user is logged in or not

I need to update the last link on my menu. When a user is logged in, it should display a profile link; otherwise, it should show a sign-up link. ...

Different ways to utilize ng-repeat with option tags

Hello, I am currently utilizing a dropdown feature that fetches options from a database. To do this, I have created an array as shown below: const myArray = new Array(); myArray = [{className:5,avg:40},{className:6,avg:50},{className:7,avg:40}}]; Within ...

Troubleshooting the problem of keyframes chaining animation in React animations

Hey there! I am new to CSS animation and currently working on a project where I need to slide in a div element and then slide it out of the screen using keyframes in Next.js. The sliding in part is working perfectly fine, but I'm facing some issues wi ...

Adding CSS styles to an HTML page using JavaScript

Unfortunately, I do not have the ability to access the HTML directly as it is generated dynamically by a program. However, I do have access to the JS page that is linked to it. As an example, I am able to manipulate elements using JavaScript like so: ...

Create a circular status button that overlays on top of another element using CSS

Looking to enhance my CSS skills! Seeking advice on creating a status button that changes color based on chat availability and positioning it on top of another button. ...

Achieving a centered SearchBar with a single button on the NativeBase header

I am trying to center the search bar with the menu button on the right side of the header using Nativebase. The code for this is provided below: <Header> <Body> <Button style={styles.searchButton} onPress={() => ...