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:

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

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

Having trouble applying CSS styles to a class using Material UI withStyle? If you're finding that withStyle isn't working as

Check out this code snippet: import { withStyles, MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; import classNames from 'classnames'; const styles = theme => ({ myGridStyle:{ '&:.my-row-s ...

cssreactjsmaterial-uireact-with-styles

Saving a picture to local storage with the file input type in ReactJS

I am attempting to save an image in the browser storage once a user selects an image from their computer. <div className="add_grp_image_div margin_bottom"> <img src={img_upload} className="add_grp_image"/> <input type="file" class ...

javascripthtmlcssreactjs

Using Wordpress and JavaScript to dynamically hide a button if a product in the online store does not have an SKU

I'm encountering an issue on my Wordpress site where products with variations are not displaying the inner text on a certain element, despite the fact that the text is present when I inspect the element. Here's the code: const makerBtn = document ...

javascriptcsswordpresshidegetelementsbyclassname

Attempting to extract the text within a table row cell by clicking on the cell directly following it

I am trying to extract the data from a table row when I click on a specific div within that row HTML: <td class="ms-cellstyle ms-vb2">10</td> <td class="ms-cellstyle ms-vb2"> <div class="ms-chkmark-container"> <div ...

javascriptjqueryhtmlcsstraversal

List of ordered rows within a table

I am looking to incorporate a question form into a Markdown/HTML page where each question is labeled with a number. QUESTIONS | ANSWERS | -------------------|-------------------| 1. First Question | | ----------------- ...

htmlmarkdown

Instructions on filling the star icon with color upon clicking the button

Currently working on a project using codeIgniter where I have a form for rating products. I am facing an issue where, upon clicking the star button, only the border color changes to yellow while the center of the button remains white. Can someone please g ...

javascripthtmlcsscodeigniter

PHP programming language for opening, editing, and saving HTML files

Trying to use PHP to open an HTML file, remove the content of a specific div (class Areas), and then save it. $dom = new DOMDocument; $dom->loadHTMLFile( "temp/page".$y.".xhtml" ); $xpath = new DOMXPath( $dom ); $pDivs = $xpath->query(".//div[@class ...

phphtmldomremoveclass

Is there a way to automatically refresh the page and empty the input fields after clicking the submit button on the contact form?

My knowledge of PHP and js is limited, so I may require additional guidance in incorporating those codes. Lately, I've been developing a contact form and making good progress. However, I'm struggling with figuring out how to refresh the page or ...

javascriptphphtmlcss

A variable in Javascript storing data about jQuery DOM elements

Currently, I am using the slick slider for my development (http://kenwheeler.github.io/slick/) In JavaScript, there is an event that returns a variable called 'slick' When I print the variable using console.log, this is what I see: From what I ...

javascriptjqueryhtmldomslick.js

To prevent the background image (blue border) from shifting, I need to extract the list item element without causing the image to

Having trouble with the side borders on my navbar. I've used a background image for the border (blue line) in the list item of the navbar. Is there a way to move down two specific list items slightly, like shown in my screenshot? I need to bring down ...

htmlcss

The JSON data response is not being properly displayed on the div element

I am having trouble with the success function in my ajax call. The data is processed correctly in the view and the ajax call works fine, but for some reason, the data is not getting appended to the div. Here is my jQuery: $(document).ready(function() { ...

javascriptjquerypythonhtmldjango

The validation process did not pass because of a manually inputted value

When a user selects a file, the filename value is automatically inserted into the fileName field. However, the validation fails because the field is still considered empty until at least one more character is added. How can I fix this issue? This is how t ...

htmlangularjsvalidation

The collapsible tree nodes overlap one another in the D3.js visualization

I'm currently working on integrating a d3 code into Power BI for creating a collapsible tree structure. Each node in the tree is represented by a rectangular box, but I've run into an issue where nodes overlap when their size is large. Below is t ...

javascripthtmlcsstypescriptd3.js

A method for expanding the menu upwards to make room for newly added items

Looking at the images below, I have a menu that needs new items added to it while maintaining the position of the lower-left corner. Essentially, each time an entry is added, the menu should expand upwards from "the upper-left corner" while keepi ...

javascripthtmlcssangularjsangular

Vanilla JS method for resetting Bootstrap 5 client-side validation when focused

I'm currently exploring Bootstrap 5's client-side validation feature. However, I've encountered a usability issue with the is-invalid class. After clicking the submit button, this class persists until the correct input is entered. I would li ...

javascripthtmlcsstwitter-bootstrap

Footer disappearing on iPad Safari viewing

I'm currently facing an issue with the footer on a website I'm working on. Everything is working fine except for when the site is viewed on Safari on an iPad. The footer is appearing way above the bottom of the page and after spending an hour try ...

cssipadfooter

Enhancing WordPress Icons for Parent and Child Elements

I am seeking to customize icons on a WordPress website. The site contains a variety of product categories, including subcategories. https://i.sstatic.net/sTm1O.png My goal is to display one icon for parent categories and a different icon for child catego ...

htmlcsswordpressicons

Use Angular Js to add HTML inner elements to the table

This is my custom HTML code: <body> <div ng-app="tham" ng-controller="tham-control"> <div class="container"> <table class="table table-bordered table-striped"> <thead> ...

jqueryhtmlangularjs

What sets apart :first-child from :first-of-type?

I need help understanding the distinction between element:first-child and element:first-of-type Let's consider a scenario where you have a div element div:first-child → Refers to all <div> elements that are the first child of their parent. ...

csscss-selectors

Executing Selenium test cases based on HTML tag is a key aspect of automated testing

I need to run my selenium test scenarios based on the value of an HTML tag, for example: <meta name="survey name" content="ABC Car"> The content represents different event types, with a total of 4 possible event types. ...

htmlseleniumselenium-webdriver