Position the logo at the center of the Vuetify navigation bar

In my Vue/Vuetify application, the navigation bar consists of several elements:

  1. A hamburger menu
  2. An SVG logo that is linked to the homepage
  3. Various navigation links

I am trying to style the elements as follows: left-align the menu, center the logo, and right-align the navigation links. Below is the code snippet I have been working with:

<v-app-bar app>
    <!-- hamburger menu --->
    <v-menu>
      <template #activator="{ on, attrs }">
        <v-app-bar-nav-icon v-bind="attrs" v-on="on" />
      </template>
      <v-list>
        <v-list-item v-for="(menuItem, index) in menuItems"
                     :to="menuItem.route"
                     :key="index">
          {{ menuItem.text }}
        </v-list-item>
      </v-list>
    </v-menu>

    <!-- logo --->
    <router-link :to="{name: 'home'}">
      <v-img src="../assets/logo.svg" width="110px" />
    </router-link>

    <!-- navigation links --->
    <v-spacer />

    <router-link v-for="(menuItem, index) in menuItems"
                 :key="index"
                 :to="menuItem.route">
      {{ menuItem.text }}
    </router-link>
  </v-app-bar>

I have tried multiple methods to center the logo without success. Any suggestions would be greatly appreciated.

cssvue.jsvuetify.js

Answer №1

When considering your goals, the approach may vary.

If your intention is to center the logo regardless of the space taken by other components, you can try the following method (although it may be challenging due to various factors like the length of router links on the right and their space requirements).

<template>
    <v-app>
        <v-app-bar app>
            <!-- hamburger menu --->
            <template #activator="{ on, attrs }">
                <v-app-bar-nav-icon v-bind="attrs" v-on="on" />
            </template>
            <v-list>
                <v-list-item
                    v-for="(menuItem, index) in menuItems"
                    :to="menuItem.route"
                    :key="index"
                >{{ menuItem.text }}</v-list-item>
            </v-list>

            <!-- logo --->
            <div class="center-me">
                <router-link :to="{name: 'home'}">
                    <v-img src="@/assets/logo.svg" width="110px" />
                </router-link>
            </div>

            <!-- navigation links --->
            <v-spacer />
            <div class="d-flex flex-row">
                <router-link
                    v-for="(menuItem, index) in menuItems"
                    :key="index"
                    :to="menuItem.route"
                >{{ menuItem.text }}</router-link>
            </div>
        </v-app-bar>
    </v-app>
</template>

<style scoped>
    .center-me {
        position: absolute;
        margin-left: 50%;
        transform: translate(-50%, 0);
    }
</style>

To evenly distribute space among the three sections, you can utilize Vuetify's Flexbox classes or surround the logo with a v-spacer as shown below.

<v-app-bar app>
  <div class="d-flex flex-row justify-space-between align-center" style="width:100%">
    <!-- hamburger menu --->
    <v-menu>
      <template #activator="{ on, attrs }">
        <v-app-bar-nav-icon v-bind="attrs" v-on="on" />
      </template>
      <v-list>
        <v-list-item
          v-for="(menuItem, index) in menuItems"
          :to="menuItem.route"
          :key="index"
        >{{ menuItem.text }}</v-list-item>
      </v-list>
    </v-menu>

    <!-- logo --->
    <router-link :to="{name: 'home'}">
      <v-img src="../assets/logo.svg" width="110px" />
    </router-link>

    <!-- navigation links --->
    <div class="d-flex flex-row">
      <router-link
        v-for="(menuItem, index) in menuItems"
        :key="index"
        :to="menuItem.route"
      >{{ menuItem.text }}</router-link>
    </div>
  </div>
</v-app-bar>

Best of luck!

Answer №2

To implement spacing in your layout, you can utilize the v-spacer component as shown below:

<v-app-bar>
  <v-menu>
     // add your code here 
  </v-menu>

  <v-spacer></v-spacer>

  <!-- Insert logo image --->
  <router-link :to="{name: 'home'}">
     <v-img src="../assets/logo.svg" width="110px" />
  </router-link>

  <v-spacer></v-spacer>

  <router-link>
    // more code goes here
  </router-link>
</v-app-bar>

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

Utilize a CompareValidator to evaluate conditions only when necessary

I am dealing with a checkbox containing a javascript function that triggers onclick to toggle the visibility of a div. Within this div, there is a textbox with a CompareValidator that validates the input as a Double. The issue arises when the checkbox is ...

javascriptjquerycssasp.net

Hide a parent div in jQuery depending on the checkbox status

I have a code snippet that I need help with. You can view the code here. $("#filters :checkbox").change(function() { $(".listing-details > div").hide(); $("#filters :checkbox:checked").each(function() { $(".listing-details ." + $(this). ...

jquerycss

Using a <button> tag instead of a <div> inside of a <button> is not allowed, as clickable divs are typically frowned upon. What

I'm currently developing a React App that functions as a calendar, allowing users to click on specific days displayed as large squares to view information for that day. For accessibility purposes, I initially considered using <button> elements b ...

javascripthtmlcssreactjsaccessibility

The functionality of Angular material input fields is compromised when the css backface property is applied

I utilized this specific example to create a captivating 3D flip animation. <div class="scene scene--card"> <div class="card"> <div class="card__face card__face--front">front</div> <div class="card__face card__face--ba ...

cssangularangular-material

What is causing the :active property to fail to work properly?

I'm currently working with Bootstrap, but I'm experiencing an issue with applying the :active state as a background color. It's not showing up, although it is changing the text color. Here is the HTML code: <button class="btn btn_sty ...

cssbootstrap-4css-selectors

Vue: event triggers malfunctioning and components unresponsive

I am new to Vue.js and I'm attempting to trigger an event from my grand-child component (card) to the child component (hand) and then to the parent component (main): card (emit play event) => hand (listen for play event and emit card-play event) ...

javascriptvue.js

designing icon buttons

I am interested in adding big buttons with icons to my website. I have images named largebut_hover.png, largebut.png, and icon.png. The icon image is supposed to be displayed inside the light grey background of largebut.png, and when hovering, it should sw ...

css

What is the best way to insert margin guidelines within a DIV being utilized as a WYSIWYG editor?

My latest project involves a design editor created using HTML and jQuery, allowing users to add text boxes, images, and more to build up unique designs. The canvas is represented by a bordered div where users can add elements by clicking on buttons that cr ...

jqueryhtmlcsswysiwygmargin

Adding dynamic content to CSS in Next.JS can be achieved by utilizing CSS-in-JS

Currently diving into the world of Next.JS, I've managed to grasp the concept of using getStaticProps to retrieve dynamic data from a headless CMS and integrate it into my JSX templates. However, I'm unsure about how to utilize this dynamic conte ...

cssnext.js

Investigating High Energy Usage on Vue.js Websites: Identifying the Root Causes

My Vue.js application has grown to be quite large with over 80 .vue components. Users have been complaining about their phone batteries draining quickly and Safari displaying a "This webpage is using significant energy..." warning. I have tried investigat ...

javascriptvue.jsenergy

Creating a unique box design with HTML and CSS

Looking to create a design layout using HTML & CSS similar to the one shown in the screenshot below. While I've made progress up to this point, I am wondering if there is a way to adjust the elements as indicated by the red lines in the screenshot ...

htmlcss

Where can Vue.js be found?

After dedicating an hour to watching instructional YouTube videos on Vue.js, I am still struggling to grasp the language! In the past, I have worked with Node.js, Jquery, and Mongodb to develop websites... I believe that web applications require multiple ...

javascriptnode.jsvue.jsejs

Solving the issue of adding Vue to a Laravel project

I am attempting to install Vue in a Laravel project by using the command npm init vite vue. However, I encountered the following error message in my terminal: SyntaxError: Unexpected token '.' at Loader.moduleStrategy (internal/modules/esm/tr ...

laravelvue.js

Creating a Large Image with Boostrap - Enhancing Position and Responsiveness

How can I make an image float to the right of the page, resize in Large and Medium screens, and vanish in Small and Xtra Small screens? I know how to hide the image using hidden-sm and hidden-xs in bootstrap, but I'm struggling to get the large image ...

htmlcsstwitter-bootstrap

observe, don't upgrade modify vue

I am attempting to modify a variable by watching and updating it in HTML <p>{{customer.creditsLeft}}</p> using Vue.js data() { customer: {}, } watch: { '$store.state.jobs.listBooking.customer': function (newVal) { this.cust ...

vue.jsredux

Is Consistency Possible with CSS Transition Direction?

Take a look at this example: https://codepen.io/jon424/pen/XWzGNLe In the provided code snippet, there is a button that can toggle the visibility of an image. When clicked, the image disappears from bottom to top and reappears when clicked again. The use ...

javascriptcsscss-transitions

A message appeared in the console warning about Vue using canvas-datagrid

Everything is displaying correctly as I intended. However, there is a warning in the console: > vue.js:2 [Vue warn]: Unknown custom element: <canvas-datagrid> - did > you register the component correctly? For recursive components, make > sur ...

javascriptvue.js

Eliminate CSS property with Jquery

I have found that most solutions only remove the attribute setting rather than removing the attribute entirely. My goal is to switch the positioning of an element from absolute to fixed. In order to position the element correctly within its parent DIV, I ...

jquerycss

Creating dynamic child components in Vue.js version 2

I am currently developing a facet search system using VueJS. The concept is fairly straightforward: Within a FilterGroup component lies the overarching filter logic. This component allows for several child components, such as AttributeXYZFilter, to provid ...

javascriptvue.jsvuejs2vue-component

Achieving label center alignment within a Bootstrap 4 container

Can anyone help me with centering the labels within the container? I'm encountering difficulties uploading an image to a website, so I've included a URL link as an alternative. To prevent the labels from filling the entire fluid container, I&ap ...

htmlcssbootstrap-4