Menu that adjusts to fit your browsing needs

Struggling to implement a fixed bottom menu on my page. Can anyone help with making it responsive?

I've attempted to create the menu, but I'm having trouble linking the logo and menu items together.

HTML

<header class="header">
  <a href="/"><img class="header__logo" src="/assets/icons/logo.png"></a>
</header>

<div class="navbar">

  <a href="/" class="navbar__logo">
    <img src="/assets/icons/logo.png">
    <img class="navbar__icon" src="/assets/icons/navbar.svg" alt="navbar">
  </a>

  <div class="navbar__container">
    <a href="/" class="navbar__link navbar__link-selected">Contact</a>
    <a href="/vacancies" class="navbar__link">Vacancies</a>
    <a href="/contacts" class="navbar__link">Contact Us</a>
  </div>

</div>

SCSS

.navbar {
  z-index: 10000;
  position: fixed;
  top: auto;
  bottom: 0%;
  left: 0%;
  right: 0%;
  margin: 0 auto;
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  * {
    z-index: 2000;
  }
}

.navbar__logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: rgba(68, 68, 74, 1);
  border-radius: 50px;
  padding: 10px;
}

.navbar__logo img {
  z-index: 1000;
}

.navbar__icon {
  z-index: 100 !important;
  position: absolute;
  left: 0;
  top: 0;
}

.navbar__logo img {
  max-height: 100%;
}

.navbar__container {
  background-color: rgba(68, 68, 74, 1);
  height: 60px;
  border-radius: 80px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.navbar__link {
  font-size: 24px;
  line-height: 100%;
  background-color: transparent;
  border-radius: 40px;
  padding: 14px 24px;

  &:hover {
    background-color: #6b6b6b;
  }
}

.navbar__link-selected {
  background-color: #27272b;

  &:hover {
    background-color: #27272b;
  }
}

Although I've created something similar, I can't seem to make it work well on mobile devices. Any suggestions for improvement?

css

Answer №1

To resolve the issue of fixing a menu at the bottom of the link, you can implement the following changes to your existing code:

HTML

   <header class="header">
   <a href="/" class="header_logo"
   <img src= "/assets/icons/logo.png" alt="Logo">
   </a>
   </header>
   <div class="navbar">
   <div class="navbar__container">
    <a href="/" class="navbar__link navbar__link selected">
        Contact</a>
     <a href="/vacancies" class="navbar__link">Vacancies</a>
     <a href="/contacts" class="navbar__link">Contacts</a>
    </div>
  </div>

CSS

    $navbar-height: 60px;
    .header {
    display: none; // This hides the header on mobile devices
    }

    .navbar {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     height: $navbar-height;
     background-color: rgba(68, 68, 74, 1);
     display: flex;
     justify-content: space-around;
     align-items: center;
     }

      .navbar__container {
       display: flex;
       align-items: center;
       gap: 20px;
      }

     .navbar__link {
      font-size: 18px;
      color: white;
      text-decoration: none;
      padding: 10px 20px;
      border-radius: 20px;
      }

      .navbar__link-selected {
       background-color: #27272b;
       }

    @media (min-width: 768px) {
    .header {
    display: block;
    padding: 20px;
     }

    .navbar {
    display: none; // This hides the navbar on desktop computers
    }
   }`

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

Adding Bootstrap alert messages dynamically and having them fade in and out

Is it possible to dynamically add a Bootstrap alert with a fadeIn effect and fadeOut effect on close without using jQuery fadeIn or fadeOut functions? function alert(title, text, type) { var html = $("<div class='alert alert-dismissible hide f ...

javascriptjqueryhtmlcssbootstrap-4

Display Text Only When Selected - Material-UI

Is there a way to display only the selected tab's text? I came across this code snippet in the MUI documentation that involves showing labels on selection. How can I achieve this effect, maybe by manipulating the state to change the color of the selec ...

cssreactjsmaterial-ui

Is Webkit's Overflow Scrolling feature hiding the divs on your website?

I recently implemented a design for my website where the content is contained within an absolute positioned div that takes up the entire screen. However, I noticed that the scrolling on this div felt clunky and not as smooth as I would like it to be. After ...

htmlcssiosmobile-safari

Tips for customizing the appearance of the "Read More" button on an Elementor card

I'm new to the world of wordpress and I'm struggling to customize the CSS for a button on a card. My goal is to center the "Read more" button on the post card and give it a border, but I'm not having any luck in Elementor. I tried tweaking t ...

csswordpresselementorcustom-wordpress-pages

Adding a <div> within a <form> on button click using HTML and jQuery tactics

Whenever the '+' button [the addMore() function] is clicked, I want to insert the following div structure. Although I am able to add the div structure, the alignment of the input text is not equal as compared to the hard coded version. Here is t ...

javascriptjqueryhtmlcss

Incorporating styles to dynamically generated elements in JavaScript

I am dynamically generating input fields with a delete button "x" that allows users to remove the field. The layout looks similar to this Here is the Javascript code: $(document).ready(function() { // When the add_button is clicked $('#add_c ...

javascriptjquerycss

Tips for removing yellow box decorations

I've noticed a yellow outline appearing on many of my input boxes when I select them. How can I remove this? Css lint is reminding me that: *:focus { outline: none; } should not be used due to outlines should not be hidden unless other visual chang ...

htmlcss

How can I eliminate the fixed menu-bar from always appearing at the top of the page

I am currently utilizing this template and you can view a live demo by following this link: However, I would like to remove the constant top effect of the menubar. This is the content of style.css: /*--------.menu_area-------- */ .menu_area{ float: le ...

htmlcss

Ways to conceal rows and columns of a table at the edges

Suppose you have a table measuring 82x82, but you only want to display the central 80x80 section of the table while still retaining the data in the hidden cells. One solution could be enclosing the table within a div element that hides the unnecessary part ...

htmlcss

Adjust the initial slider according to the values displayed in the following four sliders

Having an issue updating the slider value in the first one based on selected values from four other sliders. The selected value should not exceed 50, which is the maximum value in the first slider. Link to Working Fiddle : Below is the HTML code : & ...

javascriptjqueryhtmlcss

Transitioning the height of a webpage element from a fixed value to fit the content dynamically

I'm trying to create a div that smoothly transitions from a set height to a height based on its text content. This likely involves considering the window width, as narrower windows cause text wrapping and increase the required height. #object { w ...

csshtmlwebkitcss-transitions

What's going on with the background color? It doesn't seem

I have incorporated Bootstrap into my html code and I am attempting to modify the background color of a div when the screen resolution changes from large to medium or small. Even though I have added a class, the change does not reflect when adjusting the ...

javascriptjqueryhtmltwitter-bootstrapcss

Ways to eliminate extra space from the edges of a container

Trying to wrap my page in a Material UI container component, but there's this persistent whitespace on the outside that no matter how much I tweak the margin and padding, it just won't disappear. Any CSS wizard out there with a workaround to make ...

cssreactjsmaterial-ui

Stop the default drag behavior on an input range element in VueJS

Is there a way to disable the default drag functionality of an input range element without affecting the click feature? Users should be able to change values by clicking instead of dragging. <input type="range" min="0" max=& ...

javascripthtmlcssvue.jsvuejs2

Floating dropdown within a scrolling box

How can I ensure that the absolute positioned dropdown remains on top of the scrollable container and moves along with its relative parent when scrolling? Currently, the dropdown is displayed within the scrollable area. The desired layout is illustrated i ...

javascriptjqueryhtmlcss

Create custom-shaped images with JQuery's new slicing plugin

I recently tackled the challenge of displaying only a portion of an image using JQuery, specifically the first 200 pixels of its width. After successfully implementing the solution, I’m interested in exploring alternative approaches... Is there a more ...

javascriptjqueryhtmlcss

Creating a task management system using HTML, CSS, and JavaScript that utilizes local

I have been extensively researching how to create a to-do list using JavaScript with local storage, but unfortunately, I have not been able to find exactly what I am looking for. Is there a way for me to set up a to-do list and input data before actually ...

javascripthtmlcsslocal-storage

Center-align a list with items floated to the left in a d-flex container

I'm attempting to create an inline list that resembles a grid with as many cards arranged horizontally as possible. However, I've encountered a problem - when I float the list items to the left, the text centering no longer functions and the list ...

htmlcsstwitter-bootstrapflexboxbootstrap-4

What is the method to adjust line spacing of hyperlinks in JavaFX?

I am setting up a vbox and inserting hyperlinks into it. Hyperlink clickableString; clickableString = new Hyperlink(); clickableString.setStyle("-fx-text-fill: black;-fx-padding: 0; -fx-line-spacing: 0em;"); //setting the hyperlink color to black. clicka ...

csshyperlinkjavafxspacing

Adjusting icons based on the length of the text

When I have a title text and an icon, I want to align the icon to the left if the title fits on a single line. However, if the title spans multiple lines, then I need to align the icon to the top. I recently discovered a solution that involves using Javas ...

javascriptcssangularflexboxcss-grid