What methods can I use to create a navigation bar similar to this design?

Lately, I've noticed a growing trend in navigation bars that are designed to resemble waves.

Wavey Navbar

I'm eager to incorporate a similar navbar into my website, but I'm struggling to figure out how to do it. I'm working with reactjs, which means I'm utilizing Html & CSS. Despite my efforts, all my attempts result in sharp edges, unlike the smooth half-circle look I desire:

My Navbar

I'm uncertain if I'm executing the design correctly, but one issue is that the shadow effect isn't displaying in the circular section as intended.

Here's a snippet of my code:

.navbar {
    flex-wrap: nowrap;
    width: 100vw;
    height: 65px;
    align-content: stretch;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    box-shadow: 0 -3px 5px 0 rgba(0,0,0,.09);
    z-index: 999;
}
.navLink {
    width: 20%;
    height: 100%;
    flex-direction: column;
    font-size: xx-small;
    justify-content: center;
    font-weight: 700;
    -webkit-transition: all 1s;
    transition: all 1s;
    background-color: #FFFFFF;
    align-items: center;
}

.selectedLink {
    padding-bottom: 25px;
    height: 40px;
    background-color: white;
    background: radial-gradient(circle at top, transparent 34px, #FFF 20px);
    display: flex;
    flex-direction: row;
}

.icon {
    width: 26px;
    height: 26px;
}


.selectedLinkImage {
    border-radius: 200px;
    margin-bottom: 37px;
    background-color: #564cac;
    padding: 7px;
    border: 6px solid transparent;
    box-shadow: 0 -3px 5px 0 rgba(0,0,0,.50);
}
<nav class="navbar">
    <div class="navLink selectedLink" id="feed-link">
    
        <img class="icon selectedLinkImage" src="/static/media/home-active.9de5b1c3.svg" alt="feed button">
    
    </div>
    
    <div class="navLink" id="discover-link">
        <img class="icon" src="/static/media/discover.a882adf8.svg" alt="discover button">
    </div>
    <div class="navLink" id="map-link">
        <img class="icon" src="/static/media/map.9188e95b.png" alt="like button">        </div>
    <div class="navLink" id="like-link">
        <img class="icon" src="/static/media/heart.754f2ae1.svg" alt="like button">    </div>
   <div class="navLink" id="purchase-link">
       <img class="icon" src="/static/media/purchased.9bc694d4.svg" alt="purchased button">
    </div>
</nav>

htmlcss

Answer №1

To achieve this effect, using an image may be the simplest solution:

.header {
  width: 600px;
  height: 250px;
  background: rgb(102, 100, 150);
  background: linear-gradient(90deg, rgba(102, 100, 150, 1) 0%, rgba(9, 88, 121, 1) 32%, rgba(0, 212, 255, 1) 100%);
  position: relative;
  padding: 15px;
}

.container {
  position: absolute;
  width: 600px;
  height: 150px;
  top: 100px;
  display: flex;
  flex-direction: row;
}

.circle {
  background-color: lightblue;
  border-radius: 50%;
  width: 130px;
  height: 130px;
  position: absolute;
  left: 75px;
  top: 40px;
}

.cutout {
  width: 150px;
  height: 150px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAZQSURBVHhe7d1NyG1THMfx56JQFKNLGVAGdCnKgFKuMmBmYEAIZaoUA2VgIBkaGiJkQFEGFIVSJopCDBQD5d4RRaG8/b/75bTPec7L3mfv/z5v30/9W+vcl+fe+5zfXWudtfY5+8R/4ejo6OOo26Okvj6KOn1O...

<div class="header">
  <div class="circle"></div>

  <div class="container">
    <div class="left"></div>
    <div class="cutout"></div>
    <div class="right"></div>
  </div>
</div>

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

Move the items downwards to occupy any empty space vertically

Just a quick overview of the code I'm working with (I am using Material UI in React). This container is meant to hold chat messages exclusively. const ChatContainer = ({ chatMessages }) => { const classes = useStyles(); return ( <Paper ...

javascriptcssreactjsmaterial-ui

Ways to interact with a button that toggles between states

I am working with a button that has both an enabled and disabled state. Enabled State: <button type="button" class="btt-download-csv site-toolbar-menu-button icon-download no-icon-margins ng-isolate-scope" title="Download CSV" rc-download-csv="" curren ...

pythoncssselenium

How to animate a left border shifting to the center using JavaScript

As I'm modifying my current div, I need to add a vertical line in the center of it. I've come across various solutions where a left border is added and then shifted using the left property by 50% (which effectively places it in the middle). Here ...

javascripthtmlcsssimple-html-dom

The combination of Asp.net and Bootstrap offers a powerful

I am facing an issue with using Bootstrap in my ASP.NET project. The page displays correctly on a desktop, but when I resize the page to mobile phone size, the navigation panel does not stay in dropdown position. Here is my code: <%@ Page Language="C ...

jqueryasp.netcsstwitter-bootstrap

jQuery - delete a single word that is case-sensitive

Is there a way to eliminate a specific case-sensitive word from a fully loaded webpage? The word in question is "Posts" and it appears within a div called #pd_top_rated_holder that is generated by Javascript. The Javascript code is sourced externally, so ...

javascriptjquerycss

The execution of the selenium script is unreliable

Recently, I created a selenium script to automate certain manual checks on http:obsessory.com. The script utilizes a looping concept, such as mouse hovering over the Top menu and clicking on various submenus. However, during testing, I have encountered spo ...

htmlselenium

Utilizing partials in EJS for efficient HTML tag insertion

(1)home.ejs without using partials https://i.stack.imgur.com/3ozQQ.png (2)the output includes html tag, head tag and body tag https://i.stack.imgur.com/1o9jy.png (3)when utilizing header.ejs as a partial in home.ejs including opening html and body ta ...

htmlnode.jsexpressejspartials

The animation function in A-frame causes entities to vanish when used with D3.js

Working with the animation property in D3.js has been a bit of a challenge for me. When I include the a-animation directly in the HTML section, everything works as expected. <a-box id="box" position="0 1 0" rotation="0 0 0" scale="1 1 1" color="#4CC3D9 ...

javascripthtmlanimationd3.jsaframe

Loss of Image Quality when Zooming out Canvas

I have developed a code to implement zoom-in and zoom-out functionality for a canvas image. However, I am facing an issue where the quality of the image deteriorates when zoomed more than once. I am using the canvas2image plugin to convert the canvas into ...

htmlcanvashtml5-canvas

Accessing a variable from another HTML using JavaScript

I'm currently attempting to access a variable from another HTML file using JS. Specifically, I have a file (file1.htm) that opens a dialog box, and I want to send the information of the selected file to another file (file2.htm) in order to modify a v ...

javascripthtml

Ways to determine the height of a responsive div's background image

I have a container with a background image. Inside this container, there are additional elements like my navigation bar. My goal is to make the container have the same height as the background image. I've attempted the following: .bg { ...

css

Is left padding appearing mysteriously (supernatural CSS phenomenon)?

While using the Firebug inspector tool, if you hover over #jimgMenu ul, you may notice that it has left padding without any corresponding CSS rule: Where is this mysterious left padding coming from? Why is the origin not visible? EDIT: If you navigate t ...

jquerycss

Responsive Bootstrap 5+ carousel featuring cards tailored to different viewport sizes

After an extensive search, I have come across numerous outdated questions and answers regarding my issue. With Bootstrap continuously evolving, I am hoping someone can help me with my specific requirement. I am in need of a carousel of cards that adjusts ...

htmlcsstwitter-bootstrapbootstrap-5

Tips for formatting dates in Angular 6

I am currently working on a function that displays real-time dates based on user input. Currently, when the user enters the input, it is displayed in the front end as follows: 28.10.2018 10:09 However, I would like the date to change dynamically based on ...

javascriptangularhtmltypescriptangular6

Is it a good idea to relocate the pagination to the top of the DataGrid in MUI

Can someone suggest a solution for moving the default pagination of XGrid above the table? Or do I need to develop my own custom pagination instead of using the built-in feature with XGrid? ...

cssreactjsmaterial-ui

Exploring Nested CSS Grids and Resizing Images on the Web

Having an issue resizing images in CSS Grid. I set up a main layout with 2 columns, and within the first column is another grid where I intended to place an image and some text. Please remove the html comment so you can see the image. The problem lies i ...

htmlcsscss-grid

Stop the form from refreshing upon submission using an Ajax call in AngularJS

Currently, I am in the process of developing a search form that requires two inputs: Job title and Location. These keywords are used to gather data from various websites. However, upon submitting the form, the page refreshes itself. To prevent this, I have ...

javascriptjqueryhtmlajax

When working with TextareaAutosize component in MUI, an issue surfaces where you need to click on the textarea again after entering each character

One issue that arises when using TextareaAutosize from MUI is the need to click on the textarea again after entering each character. This problem specifically occurs when utilizing StyledTextarea = styled(TextareaAutosize) The initial code snippet accompl ...

javascriptcssreactjsmaterial-uistyled-components

Dynamic font size that adjusts as you change the window dimensions

Is there a way to adjust the font size in HTML so that when I resize the window, the text size adjusts accordingly? It's like setting a percentage for the text based on the size of the container it is in. Let me provide an example of what I have in m ...

javascriptjqueryhtmlcss

How to eliminate the vertical scroll indicators in Material UI's TextField

I'm currently working on customizing the styling of a Material UI textfield and I need to remove the top-down arrows. Below is the code snippet I have so far: const theme = createMuiTheme({ MuiInput: { root: { "&::-webkit-outer-spin-bu ...

cssreactjsmaterial-ui