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

Question

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

Navigation

#1 by (7 votes)
#2 by (3 votes)

5

So I'm a beginner in the Web Design area, and I'm having some issues with css on a site I'm developing.

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

How could I do this more accurately to stay responsive? Initially, I left the menu fixed , and created a pro div and left as absolute , but if it is decreasing the screen, input of the search "runs away" from the < in> trapeze . Could someone help me or give me a hint how I could do?

<html><head><metacharset="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 webdesign layout-responsivo

asked by anonymous 18.12.2014 / 23:44

2 answers

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, just position as you wish.

19.12.2014 / 13:14

Access negative index of an array How to limit the number of pages displayed on a page?

score 7 · Accepted Answer

I set this example by following the bootstrap framework.

Analyze and place according to your needs.

I created a div called .trapezoid-search and within 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 do not quite understand what you want to happen "because it's responsive" but anyway it tries to adapt to your code.

DEMO - BOOTPLY