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

Show two <p>'s next to each other

I am trying to arrange 2 paragraphs side by side. <p class = "firstClass">This is the first paragraph.</p> <p class = "secondClass">This is the second paragraph.</p> Result: This is the first paragraph. This is the second paragra ...

htmlcssparagraph

Tips for displaying the HTML content within the autocomplete box

My situation involves a text input and an HTML form where users can submit their name to retrieve information. I am using AJAX to display the usernames dynamically. <div class="hidesearch" id="search" style="width:"400px;"> <inp ...

javascripthtmlcss

Switching Out Bootstrap Dropdown with Dropup (Varying functionality on two almost identical implementations)

In the midst of my project on Github Pages, I encountered an interesting issue involving replacing a bootstrap .dropdown with .dropup when the div's overflow-y: scroll causes the dropdown menu to be cut off or overflow. The functionality can be viewed ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Eliminate a specific element from the dataset

My question revolves around a data array used to populate three drop down <select> boxes. How can I eliminate duplicate values within the drop downs without affecting the array itself? For example: data = { firstbox_a: ['grpA_1','gr ...

javascripthtmlarraysjsonhtml-select

Achieving the extraction of a particular string from an HTML element using JavaScript

<input id="WD01B3" ct="CB" lsdata="{2:'WD01B4',4:'Any',20:'\x7b\x22WDA_TYPE\x22\x3a\x22DROPDOWN_BY_KEY\x22,\x22WDA_ID\x22\x3a\x22ABCA950297D2C0C432BAB9BB ...

javascripthtmldom

The use of Material-UI collapse animation in a table results in the insertion of div elements, triggering a validateDOMNesting warning

Having a data-filled table, I am looking to implement smooth transitions when adding or deleting an item. This is a ReactJS project utilizing Material-UI. The desired effect is similar to the one demonstrated in their example. While they use a List compon ...

cssreactjshtml-tablematerial-ui

Solving the "ExpressionChangedAfterItHasBeenCheckedError" in Ionic: A Guide

//html <span style="margin-left:43%;background-color:rgb(229,229,229);border- radius:10%">&nbsp;&nbsp;{{formatEpoch(epoch)}}&nbsp;&nbsp;</span> //ts lastdate:any; formatEpoch(epoch): string { ...

htmlangulartypescriptionic-framework

Different strategies for displaying a singular pie chart on multiple pages

I have implemented a pie chart on an HTML page and now I want to display this chart on multiple other HTML pages. Below is the JavaScript code for creating the pie chart: function piechart() { var chart; var legend; ...

javascriptjqueryhtmljsp

The persistent issue of the modal box disappearing persists, despite my efforts to remove additional instances of bootstrap.min

I have been struggling to prevent my modal box from disappearing, despite trying various solutions found online. How can I ensure that it stays visible? Here is the code in question: <html> <head> <title> Test Slides </titl ...

javascripthtmlcsstwitter-bootstrap

Python web scraping with BeautifulSoup to gather information

After searching on zillow, I aim to extract all items from the unordered list and target a specific class: "StyledPropertyCardDataWrapper-c11n-8-84-3__sc-1omp4c3-0 bKpguY property-card-data" This class contains information such as price, address ...

pythonhtmlselenium-webdriverweb-scrapingbeautifulsoup

Wait until the link is clicked before showing the list element

Is there a way to prevent the display of list element id="two" in the code below until link "#two" has been clicked, removing element id="one"? I am looking for a CSS or JS solution that completely hides the list element rather than just hiding it from vie ...

javascriptjqueryhtmlcss

Centering <th> elements is key for achieving a visually appealing print layout

Is there a way to center align the header and body of a table when printing it? I am using datatable. Here is how it currently looks: Check out this screenshot I have tried adding classes to the th tags in the HTML table, but they still appear aligned t ...

htmlcssajaxdatatable

Using HTML to position multiple lines of text alongside an image

I have multiple lines of content and hyperlinks. Additionally, there is an image included. I am looking to have the text aligned on the left with the image on the far right, positioned next to the text. While I attempted to use flexblocks to center everyt ...

htmlalignment

Retrieving script data from a webpage

I found a link that I want to extract content from, here is the link: https://www.whatever.com/getDescModuleAjax.htm?productId=32663684002&t=1478698394335 However, when I try to open it using Selenium, it doesn't work. It opens as plain text wit ...

pythonhtmlajaxselenium-webdriverweb-scraping

Tips for retrieving selected items in an array object

Within my UI, I have a select field that, on change, populates corresponding data in a div with nested ul and li elements. What I am attempting to achieve is to convert the selected items within the list (which include checkboxes) into an object of arrays ...

javascriptjqueryhtmlcss

Utilize jQuery to automatically assign numbers to <h1-h6> headings

Looking to develop a JavaScript function that can automatically number headings (h1- h6) for multiple projects without relying on CSS. Currently achieving this with CSS: body { counter-reset: h1; } h1 { counter-reset: h2; } h2 { counter-reset: h3; } ... T ...

javascripthtmljquerycssfunction

Tips for handling line breaks across different platforms within a web application

I am currently developing a Web application and I have encountered some difficulties with the handling of newLine characters. My application allows users to create posts (similar to a forum) using the Markdown language. This means that the content is in p ...

htmlinternet-explorerweb-applicationscross-platformnewline

Achieve dynamic styling and adjust window size using window.open

My mind is exhausted after days of trying: function prtDiv( o ) { var css = 'body {font:normal 10px Arial;}' ; var wo = window.open('','print','width=600,height=600,resizable=yes'); wo.document.write( '<he ...

javascriptcsswindow.openscalable

Tips for arranging Angular Material cards in columns instead of rows

I am currently developing a web application using Angular, and I've encountered an issue while trying to display cards in a vertical layout rather than horizontally. My goal is to have the cards fill up the first column (5-6 cards) before moving on to ...

htmlcssangularangular-material

Is PHP loaded prior to the `html body`?

I'm facing a unique challenge where I am currently transferring variables from a PHP page to hidden HTML inputs. The values are extracted from these hidden inputs using a JavaScript function that is called in the following manner: <body onload=" ...

phpjavascripthtml