Creating a curved banner with the logo at the center

I am currently attempting to create a more rounded header that extends down where the logo is located.

Currently, I have applied a pseudo element on the "a" tag containing the logo with a white background and border-radius. However, I want the header to flow smoothly from the left, under the logo, and then to the right, similar to the image provided below.

Although ChatGPT suggested using clip-path, none of the examples provided seem to be working for me.

Any assistance in achieving this desired look would be greatly appreciated.

Here is an example of what I am aiming for:

htmlcss

Answer №1

How would you like the header to respond on different screen sizes? Should the rounded extension below the logo maintain a consistent size and position as you expand the screen horizontally, or should it adjust and stretch proportionately?

I'm assuming you prefer the extension to remain a constant size and position. One way to achieve this is by using a background-image. Simply create an image that resembles the design provided, but in white-and-transparent instead of black-and-transparent.

https://i.sstatic.net/gwP5rTBI.png

body {
  background-image: url(https://picsum.photos/id/791/1000);
  background-size: cover;
  margin: 0;
}

header {
  height: 70px;
  padding: 0 100px 30px 160px;
  background-image: url(https://donald.au/bugs/so-79146597.webp);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header img {
  width: 120px;
  border-radius: 60px;
}

header nav {
  display: flex;
  gap: 1em;
}

header nav a {
  color: inherit;
  text-decoration: none;
}
<header>
  <img src="https://picsum.photos/id/1074/240">
  <nav>
    <a href="">Menu 1</a>
    <a href="">Menu 2</a>
    <a href="">Menu 3</a>
  </nav>

</header>

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

Tips for effectively searching for an element at a specific index

In the DOM structure provided, there are multiple div elements with different classes nested within each other. <div id="container"> <div class="item"></div> <div class="item"></div> <div class="another-container"> ...

javascripthtmlcssdom

Problems with displaying Wordpress content on your web browser

I am having trouble getting my website content to display properly in a web browser, even though I built it using Wordpress. It appears that only the logo and the 'Services' bar are showing up on the page, while the rest seems to be missing. I s ...

javascriptcsswordpress

Is there an automatic space added when reading from a .txt file and concatenating the content before echoing it?

I have a piece of code where I am reading content from a text file and displaying it on a webpage. Here's the code snippet: $lines = file("content.txt"); $i=1; foreach($lines as $line ){ $var["line" . $i] = $line; $i++; } extract($var); The conten ...

phphtml

Obtain the texture from a user upload and apply it to a geometry in three.js

As a beginner in three.js and JavaScript, I am excited about the possibilities and have been creating small Three.js scenes to improve my skills. My ultimate goal is to build a 3D website, but I am currently stuck on how to allow users to upload an image f ...

javascripthtmlthree.js

Simple method to toggle between elements using jQuery

After creating a script using jQuery to show/hide content when tabs are clicked (which also changes the color of the clicked tab), everything is functioning smoothly. However, I believe there may be a more efficient way to switch between content that allow ...

javascriptjqueryhtmlcsstabs

Preventing flickering when refreshing an AJAX HTML JavaScript page

I am working on a project where I need to constantly refresh a table on my HTML page without any flickering. To achieve this, I am utilizing javascript and ajax. Below is the script I am using: var table = $('#dt').DataTable( { ...

javascriptajaxhtml

What is the correct way to properly insert a display none attribute

I'm experiencing some alignment issues with the images in my slideshow. I used this example as a reference to create my slide: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_dots When clicking on the next image, it seems to mo ...

javascripthtmlcss

Modifying the title of a webpage with a Bootstrap design

As a newcomer to HTML/CSS, I recently utilized a Bootstrap theme from Themezy to build my personal website. The template includes a navigation bar with tabs labeled Top, Work, Portfolio, and Contact. I felt the need to change Top to About, so I replaced ...

htmlcsstwitter-bootstrap

I am encountering challenges and confusion with CSS

I am encountering an issue with my code that is causing some difficulties. The goal is to create a basic div with left, right, and center panes. The left pane loads perfectly, but the right pane, which has the same css styling, displays its children with a ...

htmlcss

What is the best way to integrate Sass into my CSS?

Currently, I am diving into the world of Sass and I am truly impressed by its simplicity. However, I have encountered a hurdle when it comes to compiling and importing my styles. Whenever I look at my style.css file, I notice that it includes not only the ...

csstwitter-bootstrapsasscompass-sass

Having trouble converting my form data into an array for table display

My website has a form for entering dummy patient information, with a table to display the submitted data. However, I'm facing an issue where the data is not being stored in the array when the user clicks the "Add Patient" button. Upon checking the arr ...

javascriptjqueryhtmlarrayshtml-table

Utilize the inherited background color for a linear-gradient effect

Here is the code snippet I am working with: <label className={classes.trigger} htmlFor={uniqueId} ref={labelRef} style={{ background: val, borderColor: val }} /> This is the corresponding CSS: .trigger { display: block; posit ...

javascripthtmlcssreactjssass

What is the quickest way to display an image in Chrome - within an img tag, on a canvas, or as

I'm curious to find out which option would lead to the quickest paint time and in what scenarios. After coming across conflicting opinions, I'm interested in seeing some benchmarks... I've conducted my own tests but I'm unsure of thei ...

csshtmlperformance

Why is my node.js react app failing to detect the index.html file?

Take a look at the app here: git repository The issue I'm facing is that index.html doesn't seem to be properly linked, resulting in: 1) The website not being responsive for mobile devices 2) Lack of a favicon https://i.sstatic.net/l4hHJ.png ...

javascripthtmlnode.jsreactjs

Issue with VideoJS: MP4 file does not play after dynamically updating video URL

I have been using videoJs to display videos on my website. Below is the HTML code: <video id="player-vjs_html5_api" class="vjs-tech" crossorigin="anonymous" preload="auto" src="http://path-to-video/small.mp4"> <p class="vjs-no-vjs">Your bro ...

javascriptangularjshtmlcoffeescriptvideo.js

establish the reliance on field w

I want to create a dependency between two fields. The selectbox contains a list of options. If the first or fifth option is selected in the dropdownbox, apply the class "selectboxlist". Then I would like to set the value '-1' in the second ...

javascriptc#htmlasp.net

Clicking the responsive menu does not reveal the hidden overlay div as expected

Struggling with finding the correct function to open the hidden div of my responsive menu on my new website. Check out my code: https://codepen.io/anon/pen/XRJRGE <a class="page-head__menu" id="js-menu" href="#" onClick="open()">Menu< ...

javascriptjqueryhtmlcss

Is there a way to retrieve php session in a javascript file?

Here's the code snippet for reference: Contents of index.php file Javascript code from index.php function Result() { var marks = 55; document.getElementById("hdnmarks").innerHTML= marks; window.location = "results.php"; } HTML code from ind ...

javascriptphpjqueryhtmlsession

Update the color of the header background in an HTML table to match its original shade

Whenever a selection is made from the dropdown menu, a script triggers to change the background color of the selected number in the table header. I'm trying to figure out how to revert the background color back to its original state after making a ne ...

javascripthtmlcss

Troubleshooting the Width Problem in Bootstrap 5 Dropdowns

I am currently working on a new project and encountering an issue with the width of a Bootstrap 5 dropdown. The problem lies in the discrepancy between the button width and the menu width. Although it may seem simple, I am having trouble resolving it as I ...

javascripthtmlcsstwitter-bootstrapbootstrap-5