How about incorporating two subtly tilted SVGs for a creative twist on navigation backgrounds?

I am in the process of designing the navigation menu for my website and I have a specific vision in mind. I want to create a unique background using two rectangular SVGs that are slightly rotated off axis and overlapping each other, with their edges extending beyond the screen's boundaries. The height of the SVGs should remain constant at 120px across all breakpoints, and the navigation content should be vertically centered within the container, even though the rotation may make it appear off-center. However, I'm facing challenges with the SVG heights shrinking when resizing the browser window and alignment issues. Is there a better approach to achieve this design?

.hero-bg {
  height:20vh;
  min-height:200px;
  max-height:350px;
  width:100%;
  background:url('http://placehold.it/1920x1080');
  background-size:cover;
}
.navigation {
position:relative;
  height:120px;
  overflow:hidden;
}
.nav-bg-1 {
  fill:red;
}
.nav-bg-2 {
  fill:black;
}
.navigation svg {
position:absolute;
top:-10px;
width:110%;
left:-5%;
}
.navigation ul {
  list-style-type:none;
  padding:0;
  margin:0;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}
  .navigation ul > li {
    display:inline-block;
  }
    .navigation ul > li > a{
      color:#fff;
      text-transform:uppercase;
      text-decoration:none;
    }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<section id="hero">
  <div class="hero-bg"></div>
  <div class="navigation">
      <svg viewBox="0 0 2027.79 155.34">
          <rect class="nav-bg-1" x="953.89" y="-935.33" width="120" height="2026" transform="translate(918.54 1090.05) rotate(-89)"/>
          <rect class="nav-bg-2" x="0.89" y="14.67" width="2026" height="120" transform="translate(-0.32 4.42) rotate(-0.25)"/>
      </svg>
      <div class="container">
          <div class="row">
              <div class="col-sm-4 hidden-xs">
                <!-- LOGO -->
              </div>
              <div class="col-sm-8">
                  <ul>
                      <li><a href="#">Home</a></li>
                      <li><a href="#">About</a></li>
                      <li><a href="#">Products</a></li>
                      <li><a href="#">Contact</a></li>
                  </ul>
              </div>
          </div>
      </div>
  </div>
</section>

After achieving the background bars as intended, my next step is to animate them and modify their shapes slightly as the user scrolls, utilizing MorphSVG. It is essential that the solution involves using SVG instead of alternative methods.

Here is a visual representation of my desired outcome. While the navigation will be contained within a specific area, the red and black bars should extend to the edge of the screen regardless of the screen size:

htmlcsssvg

Answer №1

If I were to choose a method, I would opt for using pseudo-element and applying a skew transformation in the following way:

.navigation {
  display: flex;
  justify-content:center;
  margin-top:50px;
  height:80px;
  padding:30px 0;
  position:relative;
  margin-bottom:50px;
}
.navigation:before {
  content:"";
  position:absolute;
  right:0;
  left:0;
  top:10px;
  bottom:0;
  background:#000;
  transform:skewY(-3deg);
  z-index:2;
}
.navigation:after {
  content:"";
  position:absolute;
  right:0;
  left:0;
  top:10px;
  bottom:0;
  background:red;
  transform:skewY(3deg);
  z-index:1;
}
.navigation ul {
 position:relative;
 z-index:3;
}

.navigation ul>li {
  display: inline-block;
}

.navigation ul>li>a {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
}
<div class="navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

Update

For a solution involving SVG with some JavaScript implementation, here's an approach that maintains full width even on window resize:

$('.back-nav').css('transform', 'scaleX(' + $('.navigation').width() / 500 + ')');
$(window).resize(function() {
  $('.back-nav').css('transform', 'scaleX(' + $('.navigation').width() / 500 + ')');
});
body {
  margin: 0;
}

.navigation {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  height: 80px;
  width: 100%;
  padding: 30px 0;
  position: relative;
  margin-bottom: 50px;
}

.back-nav {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: left;
}

.navigation ul {
  position: relative;
  z-index: 3;
}

.navigation ul>li {
  display: inline-block;
}

.navigation ul>li>a {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <svg class="back-nav" width="500" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="20" width="500" fill="red" height="120" transform="skewY(3)"/>
  <rect x="0" y="50" width="500" height="120" transform="skewY(-3)"/>
</svg>
</div>

Alternatively, you can achieve a similar effect without JS by using a background image:

body {
 margin:0;
}
.navigation {
  display: flex;
  justify-content:center;
  margin-top:50px;
  height:120px;
  width:100%;
  position:relative;
  margin-bottom:50px;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="none" viewBox="0 0 25.1 30" style="enable-background:new 0 0 25.1 30;" xml:space="preserve"><polygon points="25,0 25,20 0,25 0,5" fill="red"/><polygon points="25,5 25,25 0,20 0,0" fill="black"/></svg>');
  background-size:100%;
}

.navigation ul {
 position:relative;
 z-index:3;
}

.navigation ul>li {
  display: inline-block;
}

.navigation ul>li>a {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>

</div>

Answer №2

It seems like the best approach in your situation would be to place each svg bar independently, possibly grouped within a div.

(In the following code snippet, you'll need to incorporate some media queries to properly position the ul in the center of the black bar and the entire .navigation element. However, the basic concept should be clear)

.hero {
  position: relative;
}
.hero-bg {
  height:20vh;
  min-height:200px;
  max-height:350px;
  width:100%;
  background:url('http://placehold.it/1920x1080');
  background-size:cover;
  z-index: -1;
  position: absolute;
}

.navigation {
  position:relative;
  width: 100vw;
  min-height: auto;
  height: auto;
  overflow:hidden;
  padding-top: 185px;
}

.svg-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
}

.nav-bg-1 {
  width: 105vw;
  position: absolute;
  z-index: -1;
  height: 50px;
  height: auto;
  left:-1em;
}

.nav-bg-rect-1 {
  fill: red
}

.nav-bg-rect-2 {
  fill: black;
}

.navigation ul {
  list-style-type:none;
  padding:0;
  margin:0;
  position:relative;
  padding: .6rem 1rem 1rem;
  height: 100%;
  width: 100%;
  transform: rotate(-1.01deg);
}

.navigation ul > li {
  display:inline-block;
}

.navigation ul > li > a{
  color:white;
  display: block;
  //padding: 2rem 1rem;
  text-transform:uppercase;
  text-decoration:none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>

<section id="hero" class="hero">
  <div class="hero-bg"></div>
  <div class="navigation">
    
    <div class="svg-wrapper">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1117.79 73" class="nav-bg-1">
        <defs></defs><title>rectred</title><g id="Laag_2" data-name="Laag 2"><g id="Laag_1-2" data-name="Laag 1"><rect class="nav-bg-rect-1" x="534.9" y="-522" width="48" height="1117" transform="matrix(0.02, -1, 1, 0.02, 509.89, 594.44)"/></g></g>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1117.8 79.83" class="nav-bg-1">
        <title>rectblack</title><g id="Laag_2" data-name="Laag 2"><g id="Laag_1-2" data-name="Laag 1"><rect class="nav-bg-rect-2" x="0.4" y="7.92" width="1117" height="64" transform="translate(-0.51 7.93) rotate(-0.81)"/></g></g>
      </svg>
    </div>
    
    <div class="container">
          <div class="row">
              <div class="col-sm-4 hidden-xs">
                <!-- LOGO -->
              </div>
              <div class="col-sm-8">
                  <ul class="nav-bar">
                      <li><a href="#">Home</a></li>
                      <li><a href="#">About</a></li>
                      <li><a href="#">Products</a></li>
                      <li><a href="#">Contact</a></li>
                  </ul>
              </div>
          </div>
      </div>
  </div>
</section>

In this scenario, having two separate svg elements enclosed in a div makes it easier to manage them. They can be positioned absolutely behind your navigation list.

If my observation is correct, your Menu appears to have a slight rotation (similar to the black bar). Therefore, I assume you do not intend to apply any transformation to this bar. Otherwise, the behavior of your Menu might be altered.

If this solution isn't aligned with what you're aiming for, could you provide more details on the specific transformations you plan to implement?

For reference, here's the CodePen where I experimented with this setup: https://codepen.io/fspin/pen/YYJyNY. (There's a fun scroll effect included!)

Update: Upon further consideration, another proposed direction could be viewed here: https://codepen.io/fspin/pen/zpmdOd

You may need to address a few factors:

  1. To enable the svgs to extend beyond the viewport, consider using vw and vh units along with setting overflow: hidden on your container.
  2. To accurately control the positioning of your black bar, placing it solely within the container could be necessary. This raises the issue of it being confined within the viewport. One potential solution could involve utilizing two svgs - one within the container and the original one inside the svg wrapper.

This analysis might delve into complex aspects, but the challenge intrigues me. Please share more insights if this aligns with your envisioned trajectory.

Disclaimer: While not an SVG or CSS expert, I believe I possess sufficient understanding to tackle this task in a sound manner.

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

Step-by-step guide on integrating node.js and MySQL to store data from an online form in a database

Currently, I am attempting to insert data into a MySQL database using node.js by clicking the submit button. However, an error message has appeared and despite understanding it somewhat, I am unsure of how to proceed. Any assistance would be greatly apprec ...

javascripthtmlmysqlnode.js

Designing versatile buttons with HTML

When accessing the website on a phone, I have trouble seeing and tapping on these two buttons because they are too far apart. I would like to change it so that once a file is selected, the 'choose file' button will be replaced by the upload butto ...

javascripthtmlcssbutton

Checkbox in Angular FormGroup not triggering touched state

There seems to be an issue with the Angular form when checking if the form is touched, especially in relation to a checkbox element. Despite the value of the checkbox changing on click, I am seeing !newDeviceGroup.touched = true. I'm not quite sure wh ...

javascripthtmlangulartypescriptangular-reactive-forms

Ensuring a dependable detection of WebSocket connection status

I've been researching how to create a dependable method for recovering a WebSocket connection. After exploring various options, I discovered that one approach involves sending heartbeats (ping/pong) to the server and monitoring if the entire pong is ...

javascripthtmlwebsocket

How to effectively utilize Python to compare HTML files

Can the HTML be compared differently as shown below? html_1 = "<h1>text<h1>" html_2 = "<h2>text<h2>" Using Google's diff_prettyHtml may not yield accurate results. If I want to say that 1 has changed to 2: <h <del styl ...

pythonhtmldiff

Is it possible for me to input a variable into the logical process of if(isset($_FILES['whatever']))?

I have recently started learning PHP and I'm in the process of creating a dynamic page that will update based on which form buttons are clicked. The functionality is working correctly, but my goal is to enable users to upload multiple files - either P ...

phphtmlarraysbuttonmove-uploaded-file

Footer division misbehaving

My goal is to add a footer to my website that includes a text field, but for some reason I'm encountering an issue with two of my divs not cooperating. You can observe this problem in this JSFiddle. Here is the CSS code for the footer: .footer { b ...

htmlcss

What is the best way to set up a condition that only runs if an element does not contain a certain class, such as "active"?

Click here for the picture I have a list of items: a, b, c, d, e, f. Whenever I click on item b, it becomes active and the other elements lose the "active" class. When an element has the "active" class, I want the background to change accordingly. If it ...

jqueryhtmlcssonclick

Centering loaders within elements of an unordered list

I am working on a navbar that uses Bootstrap 3 and AngularJS. Within this navbar, I have an unordered list with li elements. Below is a snippet of my navbar: https://i.stack.imgur.com/o75Lp.png This is the code for my navbar: <div class="navbar-head ...

htmlcssangularjstwitter-bootstrap-3

What is the meaning of this CSS acronym?

div[id^=picture]:target{ /*applying various styles here*/ } I stumbled upon the snippet of code shown above on a website discussing CSS image galleries. Can anyone clarify what this code accomplishes? Appreciate it. ...

javascripthtmlcss

Using React js to create a blurred background effect when an input field is in focus

I would like to implement an input field similar to the one shown in the image. When the input field is clicked on, I want to blur the background. image example Do I need to use a specific library for this? Currently, I am using Material UI. ...

cssreactjsinputmaterial-uifocus

Challenges in working with PHP, SQL, HTML, and AJAX data submission

Having encountered another issue, I've been attempting to make an AJAX script function properly, but whenever I click on it, the page reloads without updating the database field. The code I'm using has successfully worked for similar scripts on ...

phpjquerymysqlhtmlajax

Refresh the CSS inheritance and hover effects

Facing an issue with my web project where I am using CSS. At times, I need to reset the inheritance from the parent class for certain elements. Although I have defined some classes to style my elements, I want to completely reset all styles except for hove ...

htmlcsshover

A search form utilizing prepared statements in mysqli

Well met again, everyone. I recently reached out for help on improving some messy code I had put together, and the response was swift. Thank you for that! You can find the original question thread here: PHP - Search database and return results on the sam ...

phphtmlmysqli

The max-height property is not applied to a border-box div with padding

One technique we use is the percentage trick on paddings to maintain aspect ratio in a div as the user scales their window. Here's an example: .div { background: red; width: 80%; margin: 0 auto 10px; -webkit-box-sizing: border-box; ...

css

The jQuery UI accordion fails to function properly after refreshing the data

I am facing an issue with my HTML page where data is loaded dynamically into accordions. The accordion functionality is implemented inside a function, which is called at regular intervals to refresh the data. Initially, the accordion displays correctly, bu ...

javascriptjqueryhtmljquery-ui

When the page is loaded, ensure a condition is met before displaying a modal pop-up using AngularJS

Just starting out with AngularJS and looking to implement a modal pop up? I've tried using the modal on button click from the Angular dialog demo tutorial. Now, I want to show the pop up based on a condition when the page loads. The idea of automatic ...

javascriptjqueryhtmlangularjsmodal-dialog

Implement CSS to layer HTML 5 canvases while including a margin

I have a design conundrum in my app where I am using multiple stacked HTML canvas elements for drawing. My goal is to make the canvases fit perfectly within their containing div while also maintaining a left and bottom margin. This is how my HTML structur ...

css

Steps for storing div content (image) on server

Currently in the process of developing a web application that allows users to crop images. The goal is for users to have the ability to email the URL so others can view the cropped image, ensuring that the URL remains active indefinitely by storing every c ...

javascriptphphtml

Make the width of a table column match the width of the header

I am currently using Primeng2 datatable and I am looking to adjust the column width to match the header size. This is my HTML code: <p-dataTable #dtselfcollectmonthly [exportFilename]="exportname" [rows]="10" [value]="rawdatatrucks"> <ng-con ...

htmlcssangularprimeng