Trying to create a navigation menu like the one shown in the image below.
https://i.sstatic.net/N9BQ5.png
I've successfully styled the right corner, but I'm struggling to extend the top left corner.
https://i.sstatic.net/cL0ZK.png
Below is the CSS code I've implemented:
.btn-group > .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn-group:not(:last-child) > .btn
{
border-top-right-radius: 21px;
border-bottom-right-radius: 0;
}
It seems that extending the corner is not possible.
However, utilizing margin-left: -...px and z-index can achieve the desired effect.
.container {
display: flex;
background: gray;
padding: 4px;
}
.nav-container {
flex: 1;
}
.nav-container button {
padding: 0 20px;
height: 40px;
border: 2px solid white;
border-top-right-radius: 20px;
margin-left: -20px; /* <--- THIS */
position: relative;
}
.nav-container button:first-child {
margin-left: 0;
z-index: 2; /* <--- THIS */
}
.nav-container button:nth-child(2) {
z-index: 1; /* <--- THIS */
}
.nav-container button:nth-child(3) {
z-index: 0; /* <--- THIS */
}
.nav-container button:nth-child(odd) {
background: #C38D8F;
}
.nav-container button:nth-child(even) {
background: #CF1E22;
}<div class="container">
<div class="nav-container">
<button>Home</button>
<button>Partner</button>
<button>Product</button>
</div>
<button>Log out</button>
</div>Personally, I find it inefficient to manually assign a z-index to every single element, especially when dealing with a large number of elements.
Instead of that approach, here's an alternative method using a pseudo element to handle the overlapping effect and provide a more versatile solution.
.container {
display: flex;
background: gray;
padding: 4px;
}
.nav-container {
flex: 1;
}
.nav-container {
display:flex;
}
.nav-container button {
padding: 0 0 0 25px;
height: 40px;
border: 2px solid white;
position: relative;
}
.nav-container button::before {
content:"";
position:absolute;
z-index:1;
left:100%;
top:-2px;
bottom:-2px;
width:20px;
border: 2px solid white;
border-left:none;
background:inherit;
border-top-right-radius: 20px;
}
.nav-container button:nth-child(odd) {
background: #C38D8F;
}
.nav-container button:nth-child(even) {
background: #CF1E22;
}<div class="container">
<div class="nav-container">
<button>Home</button>
<button>Partner</button>
<button>Product</button>
<button>more button</button>
<button>again</button>
</div>
<button>Log out</button>
</div>To achieve overlapping of one button over another button, you can easily accomplish this by using either the margin-left or margin-right property with a negative value. Take a look at the example below for a solution to your issue.
<div>
<button class="btn">Product</button>
<button class="btn">Partner</button>
<button class="btn">Home</button>
</div>
button.btn {
background-color: #f00;
color: #fff;
padding: 5px 10px;
border-top-right-radius: 10px;
margin-right: -7px;
border: 1px solid #000;
float: right;
}
I hope this solution helps you with your design!
My functions are all loading onload three times instead of when they should be called. The most frustrating issue is with an onClick event of a button, where it is supposed to open a new page but instead opens multiple new pages in a loop. This creates a c ...
Currently, I am in the process of creating a simple game using javascript without jQuery. However, I am facing an issue with flickering on the canvas due to the clearing command. After researching solutions online, I came across suggestions for implementin ...
I have a website with numerous photos stored on Google Drive. The image tags in my code look like this: <img src="https://googledrive.com/host/<foldId>/A14.jpg"> Unfortunately, many of the photos are not loading and instead showing a 502 Bad ...
Currently, I am working on displaying a list of 3 items where the list item number is larger than the actual text. I have been successful in achieving this part, but now my goal is to place them side by side. This is the code snippet I have implemented: ...
I recently developed three PHP pages. The first one consists of the following form: <form method="POST" name="go" action="search_form_all.php" > <input name="value" type="text" id="search_form_1" size="65" placeholder="enter name"/> <i ...
I am facing some difficulties with this code. I am attempting to use the "onClick" function to change the image once it is clicked, open a new page in a new window, print the newly opened window, and then close it. The issue I am encountering is that while ...
I have a website using Bootstrap 4.x carousel. The layout is user-scalable with the following viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, shrink-to-fit=no">. Currently, users can pinch to z ...
I am running a basic node server and I have a CSS file that is trying to load a font from the server: @font-face{ font-family: 'NiagaraSolid-Reg'; src: url('http://localhost:1111/NIAGSOL.TTF'); } This is my attempt at servin ...
I need assistance in creating a list of terms and their definitions, each categorized under a header based on the first letter of the term. A Apple B Banana Currently, I am using the following code: <div ng-repeat="definition in definitions"& ...
One issue I'm facing is with a third party component that emits an "onCellEdit" event and passes a cell element as a parameter. My goal is to automatically select the entire text in the input element generated inside this cell when the event occurs. ...
I have a PHP forum and an HTML website that I am trying to merge for a cohesive appearance. However, I have encountered an issue when attempting to integrate the PHP code into the HTML file. Despite using the following code: <?php echo "here goes my P ...
I have a PHP page containing FedEx and UPS tracking numbers stored in a MySQL database, which are displayed within DIVs with the class "trackingnumber". Using JavaScript, I loop through these divs to retrieve the ID and then send it to a PHP page that fetc ...
I need a simple PDF modal where I can input the text: 'The sky is blue' and have it link to a PDF that opens up when clicked. I found a similar sample online, but it includes an image plus an image modal that pops up. I want to replace the imag ...
When using AJAX to verify the existence of an email or username in the database, I want to deactivate the submit button if either one (or both) already exist. Currently, I have successfully changed the input border color but I am facing a challenge with t ...
Currently, I'm in the process of cleaning up the unused CSS in my website's style.css and bootstrap.min.css files during development. I am utilizing PostCSS and Parcel for this task. After installing PostCSS and Parcel, I proceeded to create a p ...
Is there a way to notify users about external pages without using popups like in the first example here: https://i.sstatic.net/5QJLu.png Instead of the unwanted code shown above, is there an alternative solution? Is there a different approach that can be ...
https://i.sstatic.net/0iIPb.png To ensure that the second div appears above the slide div, I have applied the position:absolute property to the second div. Since the first div is a slide, I had to position the second div outside of the first div. Do you h ...
I've encountered an issue that I could use some help with. I am implementing CSS animations to move p elements horizontally inside a div at varying speeds. My goal is for them to change direction once they come into contact with each other. Any sugges ...
For the past few days, I've been struggling with a JavaScript issue as a newcomer to the language. $(document).on('click', '.content-click', function(){ $(".content-click span").toggleClass("clicked"), $(".content-view") ...
My div elements are not aligning with the grid template areas specified in the CSS. When inspecting in Firefox, it shows as "zero one two three four", "five six ... etc." The classes mentioned apply to divs within the container div with a class of "spaces ...