designing a custom logo space within the menu bar

Hey there, I have a query about creating a unique cut-out effect in the middle of a menu using CSS. Let me provide more context: I am working on a menu that has three "li" items on each side, and I would like to insert a logo in the center with a cut-out effect similar to this example:

https://i.sstatic.net/wuI6R.jpg

My initial idea for achieving this is to split the menu into left and right sections. Then, using "clip-path", I would attempt to customize the edges of both sides of the menu and position a logo in the middle of the cut-out area using "position:absolute". However, I am uncertain about the effectiveness of this approach. https://i.sstatic.net/XeGrH.jpg

If you have any better suggestions or tips, I would greatly appreciate your input.

The logo itself is transparent, and it should allow the background image to show through since the menu sits atop the image.

Here is a screenshot of the design for reference: https://i.sstatic.net/pWRM7.jpg

htmlcss

Answer №1

If you're interested in diving deeper into radial-gradients, this could be the perfect solution for the challenges you are facing.

:root {
  --background-cutout: 30px;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-image: linear-gradient(-130deg, lightblue, red);
}

nav {
  height: 30px;
  width: 100%;
  display: flex;
}

nav > div:not(.middle) {
  flex: 1 1 auto;
  background: cyan;
}

nav > div.middle {
  width: calc(var(--background-cutout) * 2);
  background-image:
    radial-gradient(circle at bottom, transparent 20px, aqua 21px); /* creates the "hole */
    
  display: flex;
  justify-content: center; /* place .circle in center */
  align-content: end; /* place .circle in the bottom */
}

nav > div.middle > .circle {
  height: var(--background-cutout);
  width: var(--background-cutout);
  border-radius: 50%;
  box-sizing: border-box; /* only needed because I used a border */
  border: 5px solid aqua;
  transform: translateY(50%);
}
<body>

<nav>
  <div class="left"></div>
  <div class="middle">
    <div class="circle"></div>
  </div>
  <div class="right"></div>
</nav>

</body>

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

Having trouble installing node-sass through npm

Currently, I am attempting to install the SASS compiler node-sass in order to compile SCSS code into CSS code. Despite following an online tutorial and replicating the same steps, I keep encountering errors. npm init --yes : this will generate a json file ...

cssnode.jsjsonsass

Create dynamic flex transitions

After searching through various CSS resources and websites, I haven't found an answer to my specific query. I have been exploring CSS tricks as well as http://n12v.com/css-transition-to-from-auto/ but still uncertain if what I'm looking to achiev ...

htmlcssflexboxcss-transitions

Issue with React Google Maps persists with StandaloneSearchBox in code causing it to be stuck on "Loading" status

I am developing a React JS page where I want to enable companies to register on my website and add their locations for rentals, purchases, etc. The main feature I need is to implement Markers on the map. While I have successfully integrated Google Maps ont ...

javascripthtmlreactjsreact-google-maps

Establishing the variable for the input value attribute with a space included

I am facing an issue with setting the value of an input button to a string variable, specifically "A Guide to the School Bus." When the HTML loads, only the first word shows up on the button. Below is my code. Any help would be appreciated. var title = "A ...

javascriptjqueryhtml

Error encountered while trying to upload a file using PHP on a hosting platform

Hey everyone, I'm feeling really frustrated right now because I'm facing a file upload error in my PHP code. The issue is that the file is not getting uploaded to my folder and no error messages are being displayed. I've been working on cr ...

javascriptphphtmlfilesystems

CSS fails to style links

Apologies in advance for the seemingly trivial and highly specific question, but I'm really struggling with this one. I'm attempting to style two <li> elements that are nested within a <nav><ul><li><a href="" ...

htmlcssstyles

Icons will be displayed when hovered over

Is it possible to display icons on hover in a div and hide them otherwise using just CSS? Or do I need to use javascript for this function? Thanks in advance! Example: HTML: <div id="text_entry"> <p>Some text here</p> <span ...

jqueryhtmlcss

Is there a way for me to access the information on a web page?

Currently, I am attempting to extract web page data as a string in order to parse it. Unfortunately, I have not been able to find any suitable methods in qwebview, qurl, and other resources. Can anyone offer assistance? My environment is Linux, C++, and Qt ...

c++qthtml

Using Scrapy with Python to extract the mysterious index of a TR element

I have come across this selector: sel = response.xpath('//table//tr[td[@class="ad73"]]') This specific code snippet retrieves a list of TR elements nested within different sections of the page. Is there a method available to determine the prec ...

pythonhtmlxpathscrapy

This particular feature is not compatible with the object's available properties and methods: `atob

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {packages: ['corechart', 'line']}); google.charts.set ...

angularjshtmlgoogle-visualizationinternet-explorer-9

Sending a file to an HTML5 <audio> element using HTTP headers

Is it possible to use the new <audio> tag in HTML5 to play a wav file, especially since it is currently only supported in Firefox? https://developer.mozilla.org/En/HTML/Element/Audio I am attempting to retrieve a wav file from the hard drive using ...

phpaudiohtmlwavhttp-headers

Please replace the text with only letters and then submit it without any spaces, periods, commas, or other symbols

Whenever I encounter a form like this, I need to submit it and replace the text in the name field with only letters - no commas, spaces, or special characters. https://i.sstatic.net/9FQnT.png myform.html <script> function fixInput(event) { na ...

javascripthtmlregex

What is the best way to position a label beneath a textbox?

Hello everyone, I am currently working on a form within an asp.net core solution and facing some issues with my CSS styling. Whenever I click the submit button with empty input fields, it validates and displays an error message; however, this action cause ...

htmlcssasp.net

JavaScript script to modify the parameter 'top' upon clicking

Here is the pen I've made. HTML <div class = 'cc'> <div class = 'bb'><div class = 'aa'> Some word </div></div> </div> CSS .cc { width: 100%; min-height: 90px; margin: 0; ...

javascripthtmlcss

Firefox displays a smaller right margin when using CSS layout in percentage units

As I work on scripting some CSS, I have come across a small challenge where the right margin seems smaller than the left one despite both being set at 5%! This issue is occurring while using Firefox version 35.0.1. body { width: 100%; padding: 0; ...

htmlcsslayout

Customize GUI - adjusting menu dimensions and placement (javascript / css)

I’ve been experimenting with integrating Dat GUI into my Three.js project for adding some controls. The interface of Dat GUI really appeals to me, but I’m facing challenges in terms of positioning the menu on the page. Specifically, I’m looking to ce ...

javascriptcssthree.js

Creating a personalized grid display

https://i.sstatic.net/tLd7X.png I've been trying to achieve the following output with my code, but so far nothing has worked. Can someone help me identify what I may be doing wrong? I'm new to this, so any guidance would be greatly appreciated. ( ...

javascripthtmlgridview

Setting limits to disable or remove specific times from the time picker input box in Angular

I'm having trouble with a time input box. <input type="time" min="09:00" max="18:00" \> Even though I have set the min and max attributes to values of 09:00 and 18:00 respectively, it doesn't seem to be working properly. I want to ...

javascripthtmlangulartypescript

What is the method for creating two separate columns that can scroll independently?

I am faced with a challenge involving a modal that contains two columns. My goal is to make these columns scrollable independently of each other while ensuring the scrollbar remains hidden. Thus far, I have managed to make the row scrollable with a hidden ...

csstwitter-bootstrapbootstrap-4

Creating a fresh CSS class and utilizing its properties in JavaScript is the task at hand

Whenever I define a css class and attempt to access its member from JavaScript, the result always ends up being undefined. Where could my mistake possibly lie? function myFunction() { var x = document.getElementById("myId").style.myMember; document. ...

javascripthtmlcss