How to make a menu that has a geometric figure in the center and is responsive?

Asked

Viewed 1,341 times

5

So, I’m a beginner in Web Design, and I’m having some problems with css on a site that I’m developing.

I have to make a fixed menu, which is nothing more than a normal bar, but which has a figure of a trapezoid in its center and inside it, a search box, as in the photo. My question is this::

How could I do this the right way to get responsive? Initially, I left the menu fixed, and created a div pro trapeze and left as absolute, but if the screen decreases, the input of the research "flees" from the center of the trapeze. Could someone help me or give me a hint of how I could do?

Menu

       <html>
    <head>
        <meta charset="utf-8"/>
        <title>Site</title>
        <link rel="stylesheet" type="text/css" href="dist/css/bootstrap-theme.min.css">
        <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
        <script type="text/javascript" src="dist/js/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="dist/js/bootstrap.min.js"></script>
        <style>
            header {
                background-color: #017338;
                height: 60px;
                padding: 0.5em;
                position: fixed;
                top:0;
                width: 100%;
            }

            header p {
                color: #fff;
            }

            .navbar-brand img {
                margin-top: 5px !important;
            }

            #navbar li, #navbar a, .navbar-brand img {
                padding:0 !important;
                line-height: 60px;
                color: #fff;
            }

            #navbar li input {
                line-height: 10px;
                width:15em;
                margin-top:1.5em;
                border:0;
            }

            #jogos button {
                margin-top:5em;
            }

            #thumbs {
                margin-top:11em;
            }

            #thumbs img {
                height:200px;
                width:300px;
            }


            @media (min-width: 1000px) {
                #trapezio {
                    background-image:url('../img/trapezio.png');
                    width: 350px;
                    height:100px;
                    position:absolute;
                    left: 550px;
                }
                .nav input[type=search] {
                    height: 2em;
                    margin-left: 9.5em;
                }

                #bemvinda a {
                    margin-left:10em;
                }
            }

        </style>
    </head>
    <body>
        <header>
            <!-- Fixed navbar -->
            <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="container">
                    <span id="trapezio"></span>
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#"><img src="logo.png" alt="SENAI BLUMENAU"/></a>
                    </div>
                    <div id="navbar" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">


                            <li>Slogan</li>
                            <li><input type="search" placeholder="pesquise um jogo"/></li>
                            <li id="bemvinda"><a href="#contact">Bem vinda, Beatriz</a></li>
                    </div><!--/.nav-collapse -->
                </div>
            </nav>
        </header>
    </body>
</html>
html css css3 responsive-layout webdesign

  • Thanks for the suggestions, Renan! Look, on the site, I’m using the Bootstrap, the part of the trapeze I’m doing by myself. Let’s say that when the screen decreases, I give a "display: None" on the trapeze (I’m using media queries for this), then in the menu there is only the logo and a button, when clicked shows a dropdown menu that has the search input.

  • 2

    Even better. Put html and CSS code related to the menu in the question.

2 answers

7


I built this example following the bootstrap structure.

Analyze and place according to your need.

I created a div calling for .trapezoid-search and within a input[type=text]

<header>
  <nav class="navbar navbar-fixed-top" role="navigation">
    <div class="container">

      <div class="trapezoid-search">
        <input type="text" class="form-control" placeholder="Pesquise um Jogo">
      </div>

    </div>
  </nav>
</header>

I removed the links/menu to better represent.

header {
  background-color: #017338;
  height: 60px;
  padding: 0.5em;
  position: fixed;
  top:0;
  width: 100%;
}

header .trapezoid-search {
  margin:0 auto;
  width:30%;
  padding:20px;
  background:#017338;
  position:relative;
}

header .trapezoid-search:after,
header .trapezoid-search:before {
  content: " ";
  width: 0;
  height: 0;
  position:absolute;
  top:-47px;
  background:#017338;
  z-index:-1;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow:0 0 5px -1px rgba(0,0,0,0.5);
  width:100px;
  height:100px;
}

header .trapezoid-search:after {
  right:-50px;
}

header .trapezoid-search:before {
  left:-50px; 
}

I don’t understand very well what you want to happen "because he is responsive" but anyway tries to adapt to your code.

DEMO - BOOTPLY

  • 1

    I adapted your code to my site and stayed exactly the way I wanted it. Thank you, Diego!

3

You can create a trapeze as follows

#trapezoid {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}

In this link here has other geometric shapes, only position as desired.

  • The doubt of it is not how to do but how to adapt the trapeze (already made) in smaller screens.

Browser other questions tagged html css css3 responsive-layout webdesign

You are not signed in. Login or sign up in order to post.