Stylish CSS for your website's navigation

I am facing a challenge with creating a menu for my website. I want it to be positioned on the left side, similar to the image provided below. However, despite writing the code and applying styles as expected, the menu does not display correctly and appears distorted on the right side of the screen. What could be causing this issue? view image here

**style.css: **

.mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  /* height: var(--mobile-nav-height); */
  height: (var(--vh, 1vh) * 100);
  background-color: var(--primary-container);
  color: var(--on-background-variant);
  padding-block: 12px 16px;
  z-index: 4;
  box-shadow: var(--shadow-1);
}

**index.html: **

<nav class="mobile-nav" aria-label="primary">
      <ul class="navbar-list">
        <li class="nav-item">
          <a href="./recipes.html" class="nav-link">
            <span class="item-icon">
              <span class="material-symbols-outlined" aria-hidden="true">
                lunch_dining
              </span>
            </span>
            <span class="label-medium">Recipes</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link" aria-current="true">
            <span class="item-icon">
              <span class="material-symbols-outlined" aria-hidden="true">
                home
              </span>
            </span>
            <span class="label-medium">Home</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="./saved-recipes.html" class="nav-link">
            <span class="item-icon">
              <span class="material-symbols-outlined" aria-hidden="true">
                book
              </span>
            </span>
            <span class="label-medium">Saved</span>
          </a>
        </li>
      </ul>
    </nav>

I need assistance in resolving the issues with setting up the menu properly.

htmlcssnavbar

Answer №1

To address this particular issue, consider utilizing the Flex property to meet your specific requirements. By aligning all navigation items according to the layout shown in the image on the left side. Implement the following CSS code:

.mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    /* height: var(--mobile-nav-height); */
    height: (var(--vh, 1vh) * 100);
    background-color: var(--primary-container);
    color: var(--on-background-variant);
    padding-block: 12px 16px;
    z-index: 4;
    box-shadow: var(--shadow-1);
}

.mobile-nav .navbar-list {
    display: flex;
}

.mobile-nav .navbar-list .nav-item {
    flex: 1;
}

.mobile-nav .navbar-list .nav-item .nav-link {
    display: flex;
    flex-direction: column;
}
<nav class="mobile-nav" aria-label="primary">
    <ul class="navbar-list">
        <li class="nav-item">
            <a href="./recipes.html" class="nav-link">
                <span class="item-icon">
                    <span class="material-symbols-outlined" aria-hidden="true">
                        lunch_dining
                    </span>
                </span>
                <span class="label-medium">Recipes</span>
            </a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link" aria-current="true">
                <span class="item-icon">
                    <span class="material-symbols-outlined" aria-hidden="true">
                        home
                    </span>
                </span>
                <span class="label-medium">Home</span>
            </a>
        </li>
        <li class="nav-item">
            <a href="./saved-recipes.html" class="nav-link">
                <span class="item-icon">
                    <span class="material-symbols-outlined" aria-hidden="true">
                        book
                    </span>
                </span>
                <span class="label-medium">Saved</span>
            </a>
        </li>
    </ul>
</nav>

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

What is the proper method for changing the height of this component in HTML?

Hey there! I'm brand new to HTML and I'm embarking on a little project for myself to enhance my skills. I have a question about adjusting the height of some text - I want it to look similar to Twitter, where each "tweet" is clearly separated from ...

htmlcss

What is the best way to retrieve the value of a submitted button in a jQuery form submission?

I am facing an issue with my HTML code. Here is the structure: <form method="post" id="IssueForm" action="wh_sir_insert.php"> <input name='id[]' type='checkbox' class="selectable" value='$col[8]' /> <inpu ...

phpjqueryhtml

Activate the 'li' element within the 'ul' whenever a 'ui-sref' link on the

I have been working on building a dashboard that consists of an abstract state called dashboard, with subdashboard as the immediate child state. https://i.sstatic.net/YTHky.png Previously, clicking on user details would take the user to the dashboard.tab ...

javascripthtmlcssangularjstwitter-bootstrap

Ensure that the view remains consistent while navigating a table that contains expanding concealed information

My table is dynamically populated with data within a div that has overflow: scroll and height set properties. The issue I face is that the data populates from the top, making it difficult to keep track of specific rows when scrolling within the #container ...

javascripthtmlcssangularjsscroll

What is the best way to modify and execute js and css (less) files dynamically using ajax and jQuery?

Whenever I click a button, an ajax call is triggered to load various html code into a div with the id 'main'. While displaying the html content is not an issue, integrating and applying css and js code to my current page has proven to be challeng ...

javascriptjqueryhtmlcssajax

Adding an active link to a vertical menu in Bootstrap 4: A step-by-step guide

Having trouble adding the active class to my bootstrap 4 menu. At the moment, only the top level item without sub-items is being highlighted as active. Can someone assist me in resolving this issue? For the top-level menu, the sl-menu-link class should ha ...

jquerybootstrap-4navbar

Having issues with media queries functioning incorrectly in VS Code

`@media(min-width:300px)and(max-width:400px){ div{ background-color: pink; } }` While experimenting with responsive design techniques, I attempted to implement this code snippet. However, it did not work as expected in Visual Studio Code. ...

htmlcssfrontendresponsiveness

JavaScript - Delayed Text Appearance with Smooth Start

I want to create a landing page where the text appears with a slight delay - first, the first line should be displayed followed by the second line. Both lines should have an easing effect as they appear. Below is a screenshot of the section: https://i.sst ...

javascriptjquerycsstransition

Issues with loading an external CSS file in an HTML document

I've been attempting to implement a loading animation using jQuery, but I'm encountering issues with loading the CSS file. I have tried various paths for the css file such as: <link href="css/animation.css" type="text/css" rel="stylesheet"> ...

javascripthtmlcsshrefexternal

Utilize AJAX to showcase JSON data retrieved from a specified URL

We are striving to showcase the names listed in our JSON file within a div using JavaScript. Despite multiple attempts, we have not yet achieved success. JSON data: This is the approach we took: <button>fetch data</button> <div id="result ...

javascriptjqueryhtmlajaxjson

Sass can be used to create custom color classes for Bootstrap 5.3 that offer

I am currently using a Bootstrap 5.3 theme and I would like to give users the option to change the main color theme from the default blue to something like purple or orange. My idea is to create additional CSS files named "orange-as-primary.css", "purple- ...

csssassbootstrap-5color-scheme

Extracting information from the 'View all responses' feature

I've been attempting to extract reviews from the following website: . Each review contains 5 ratings such as value for money and customer service. However, most of the information is initially hidden behind a 'See all Answers' button, restri ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

Obtaining the data value from a style applied to a div element in an E-commerce platform like MyShop

I have recently started using MyShop for my online store at www.myshop.com. The programming language they use is quite different from what I am used to. For example, the total price in the basket.html script is displayed using the following code: <spa ...

javascriptjqueryhtmlcsse-commerce

Creating dynamic links with Jquery

Here is a piece of Jquery code that needs to be adjusted: var previewImage = $('#prev'); var newLink = $('<a/>').attr('href', name); previewImage.append(newLink); The current HTML output is <img src=" " id="prev"/& ...

jqueryhtmlhyperlinkhrefvar

When an SVG image is embedded, its color may not change even after being converted to an inline SVG

I've inserted an SVG using an img tag. When hovering over it, I want the fill color of the SVG to change. I attempted to convert the SVG to inline SVG following this method, but it doesn't seem to be working as expected. No console errors are b ...

javascriptjqueryhtmlcsssvg

Solution for tables extending beyond the navbar and footer issue

My table is extending beyond the width of both the navbar and footer. Is there a way, using HTML and CSS, to make the navbar and footer expand in width to match that of the table? Most solutions I've found focus on formatting the table instead of addr ...

htmlcss

What is the method for modifying the appearance of the background property on an input element?

I am currently working on customizing an HTML5 video player's track bar using CSS. My goal is to utilize jQuery to modify the style of the track bar. One way I have attempted to change the background of the track bar with jQuery is by employing the f ...

jquerycsshtml

Ways to achieve perfect alignment for SVG text within its container, as opposed to stretching across the entire webpage

Recently, I've been working on a customizable photo frame designer using SVG. One of the key features allows users to add their own text to the frame. To achieve this, I'm utilizing jQuery's .keyup function. However, the issue I'm facin ...

jqueryhtmlcsssvg

React Nested Grid with Material-UI

https://i.stack.imgur.com/toxDA.jpg I am striving to replicate the layout demonstrated in the image below So far, I have the following code snippet: <Grid container justify=“space-between”> <Grid container item> <Grid ite ...

cssreactjsgridmui

Guide to placing an image in a designated position

I am looking to achieve the following scenario: Whenever a user uploads an image, it should appear in one of the smaller boxes on the right. Subsequent image uploads by clicking on the big box should populate the other small boxes on the right. Please refe ...

javascripthtmlimage