Is it possible to create a similar design that is also responsive?

Question

Is it possible to create a similar design that is also responsive?

I've been struggling to create a header for a website project I'm working on. My goal is to design something like the image below:

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

The biggest challenge I'm facing is making this design responsive. The pointed part of the blue section needs to remain unchanged, while the rest of the header should stretch to the right side. My CSS knowledge is limited, and despite my efforts, I haven't found a solution that fits my requirements.

***EDIT: One crucial aspect is that the white space between the logo div and menu bar must be transparent. It would have been simple if it were just a solid color, but it needs to show the background image behind the header :/

html css

Answer 1

Answer №1

To create a responsive website layout, I would start by designing a header with a link for the logo, followed by a navigation bar containing all the necessary links. Using media queries, I would set a minimum width to ensure that all the links fit within the navigation bar, and collapse them at a specific breakpoint:

body {
  width:100%;
  margin: 0;
  padding: 0;
}
header {
  position: relative;
  padding-right: 15px;
}
a.logo {
  position:absolute;
  z-index:1;
  border: 5px solid white;
  border-radius: 50%;
  width: 75px;
  height: 24px;
  top:0;
  left:0;
  background: black;
}
nav {
  position:relative;
  margin: 5px 0;
  height:24px;
  width:100%;
  background: black;
  text-align: left
}
@media (min-width: 767px) {
  nav a {
    display: none;
  }
}

<header>
  <a class="logo">#</a>
  <nav>
    <a>#</a>
  </nav>
</header>

The key components to making this design responsive include:

Utilizing media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries
Using percentages for sizing elements

Answer 2

To create a responsive website layout, I would start by designing a header with a link for the logo, followed by a navigation bar containing all the necessary links. Using media queries, I would set a minimum width to ensure that all the links fit within the navigation bar, and collapse them at a specific breakpoint:

body {
  width:100%;
  margin: 0;
  padding: 0;
}
header {
  position: relative;
  padding-right: 15px;
}
a.logo {
  position:absolute;
  z-index:1;
  border: 5px solid white;
  border-radius: 50%;
  width: 75px;
  height: 24px;
  top:0;
  left:0;
  background: black;
}
nav {
  position:relative;
  margin: 5px 0;
  height:24px;
  width:100%;
  background: black;
  text-align: left
}
@media (min-width: 767px) {
  nav a {
    display: none;
  }
}

<header>
  <a class="logo">#</a>
  <nav>
    <a>#</a>
  </nav>
</header>

The key components to making this design responsive include:

Utilizing media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries
Using percentages for sizing elements

Answer 3

Answer №2

To achieve the desired layout, you can utilize media queries and Bootstrap 4.0 classes that are specifically designed to help with alignment. For instance, the "ml-auto" class will align your element all the way to the right by setting its margin-left property to auto. There are many other classes available in Bootstrap that you can experiment with to customize your design further. I have crafted a solution using Bootstrap 4 that is fully responsive on various devices including mobile, tablet, and desktop screens. Feel free to add your own classes as needed! Give the code below a try to see how it works:

#nav-header {
            position: relative;
        }

        #nav-header:before {
            content:"";
            width: 80px;
            height: 100%;
            position: absolute;
            top:0;
            left:0;
            background:#fff;
            z-index: 1;
        }
        
        #nav-header .navbar-brand {
            background:#fe0000;
            text-transform: uppercase;
            font-weight: 600;
            color:#fff;
            text-align:center;
            border-radius: 100px;
            border: 10px solid #fff;
            z-index: 4;
        }

        @media (min-width: 320px) {
            #nav-header .navbar-brand {
                padding: 2% 10%;                
            }
        }

        @media (min-width: 768px) {

            #nav-header {
                margin: 25px 0 25px 25px;
            }

            #nav-header .navbar-brand {
                padding: 1.5% 8%;
            }

        }

        @media (min-width: 992px) {
            #nav-header .navbar-brand {
                padding: 1.4% 6%;                
            }
        }



         #nav-header, #navbarSupportedContent {
            background: #003cff;
            padding:0;
         }

         #navbarSupportedContent {
            z-index: 9;
         }

         #nav-header .navbar-nav {
            list-style: initial;
            color: #fff;
         }

         #nav-header .navbar-nav li {
            margin-right: 2em;
            margin-left: 2em;
         }

         #nav-header .navbar-nav > li > a {
            color:#fff; 
            text-transform: uppercase;
            font-weight: 600;           
         }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav id="nav-header" class="navbar navbar-expand-lg navbar-light">
      <a class="navbar-brand" href="#">Logo</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Option 1 <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Option 2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Option 3</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Option 4</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Option 5</a>
          </li>
        </ul>
      </div>
    </nav>

Answer 4

To achieve the desired layout, you can utilize media queries and Bootstrap 4.0 classes that are specifically designed to help with alignment. For instance, the "ml-auto" class will align your element all the way to the right by setting its margin-left property to auto. There are many other classes available in Bootstrap that you can experiment with to customize your design further. I have crafted a solution using Bootstrap 4 that is fully responsive on various devices including mobile, tablet, and desktop screens. Feel free to add your own classes as needed! Give the code below a try to see how it works:

#nav-header {
            position: relative;
        }

        #nav-header:before {
            content:"";
            width: 80px;
            height: 100%;
            position: absolute;
            top:0;
            left:0;
            background:#fff;
            z-index: 1;
        }
        
        #nav-header .navbar-brand {
            background:#fe0000;
            text-transform: uppercase;
            font-weight: 600;
            color:#fff;
            text-align:center;
            border-radius: 100px;
            border: 10px solid #fff;
            z-index: 4;
        }

        @media (min-width: 320px) {
            #nav-header .navbar-brand {
                padding: 2% 10%;                
            }
        }

        @media (min-width: 768px) {

            #nav-header {
                margin: 25px 0 25px 25px;
            }

            #nav-header .navbar-brand {
                padding: 1.5% 8%;
            }

        }

        @media (min-width: 992px) {
            #nav-header .navbar-brand {
                padding: 1.4% 6%;                
            }
        }



         #nav-header, #navbarSupportedContent {
            background: #003cff;
            padding:0;
         }

         #navbarSupportedContent {
            z-index: 9;
         }

         #nav-header .navbar-nav {
            list-style: initial;
            color: #fff;
         }

         #nav-header .navbar-nav li {
            margin-right: 2em;
            margin-left: 2em;
         }

         #nav-header .navbar-nav > li > a {
            color:#fff; 
            text-transform: uppercase;
            font-weight: 600;           
         }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav id="nav-header" class="navbar navbar-expand-lg navbar-light">
      <a class="navbar-brand" href="#">Logo</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Option 1 <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Option 2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Option 3</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Option 4</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Option 5</a>
          </li>
        </ul>
      </div>
    </nav>

Is it possible to create a similar design that is also responsive?

Answer №1

Answer №2

Similar questions

Tips on how to remove the first column from a jQuery hover effect

Which option is more effective: using an id or using !important?

What is the best way to incorporate a sliding effect into my cookie form?

"Utilizing Flask to efficiently manage a multitude of buttons and seamlessly update a

"Utilizing Primeng's P-Table Component for Enhanced Interactivity

Is Bootstrap revolutionizing the world of flex-box layouts?

Are you struggling with the issue of Function components not being able to be given refs? When you try to access the ref, it just fails. Perhaps you should consider using React.forwardRef

Adding complex JSON format to an HTML table involves formatting the data correctly and then using

How can I extract the text within a Span tag using Selenium WebDriver?

anchor to # inquiry

Is it possible to stack one Canvas on top of another?

How can you position an element at the bottom of a div using CSS?

What are some ways to change the appearance of a component using its parent?

How to display an unordered list horizontally in HTML

Can you employ a right-side offset in Bootstrap 4?

Tips for updating the content of a div with the click of another div

Adjust the placement of the navigation to the middle of the

When attempting to input a value in the middle of the line, the cursor unexpectedly leaps to the end

Concealing HTML pages in Node.js: A step-by-step guide

Text fades into view from the bottom after a line break using CSS and JavaScript