I would like to move the div below the menu, so I choose some option of it.
var cbpHorizontalMenu = (function() {
var b = $("#cbp-hrmenu > ul > li"),
g = b.children("a"),
c = $("body"),
d = -1;
function f() {
g.on("click", a);
b.on("click", function(h) {
h.stopPropagation()
})
}
function a(j) {
if (d !== -1) {
b.eq(d).removeClass("cbp-hropen")
}
var i = $(j.currentTarget).parent("li"),
h = i.index();
if (d === h) {
i.removeClass("cbp-hropen");
d = -1
} else {
i.addClass("cbp-hropen");
d = h;
c.off("click").on("click", e)
}
return false
}
function e(h) {
b.eq(d).removeClass("cbp-hropen");
d = -1
}
return {
init: f
}
})();
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body,
html {
font-size: 100%;
padding: 0;
margin: 0;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
color: #ED3237;
}
.container>header {
width: 90%;
max-width: 69em;
margin: 0 auto;
padding: 0 1.875em 3.125em 1.875em;
}
.container>header {
padding: 2.875em 1.875em 1.875em;
}
.container>header h1 {
font-size: 2.125em;
line-height: 1.3;
margin: 0 0 0.6em 0;
float: left;
font-weight: 400;
}
.container>header>span {
display: block;
position: relative;
z-index: 9999;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5em;
padding: 0 0 0.6em 0.1em;
}
.container>header>span span:after {
width: 30px;
height: 30px;
left: -12px;
font-size: 50%;
top: -8px;
font-size: 75%;
position: relative;
}
.container>header>span span:hover:before {
content: attr(data-content);
text-transform: none;
text-indent: 0;
letter-spacing: 0;
font-weight: 300;
font-size: 110%;
padding: 0.8em 1em;
line-height: 1.2;
text-align: left;
left: auto;
margin-left: 4px;
position: absolute;
color: #fff;
background: #ED3237;
}
.container>header nav {
float: right;
text-align: center;
}
.container>header nav a {
display: inline-block;
position: relative;
text-align: left;
width: 2.5em;
height: 2.5em;
background: #fff;
border-radius: 50%;
margin: 0 0.1em;
border: 4px solid #ED3237;
}
.container>header nav a>span {
display: none;
}
.container>header nav a:hover:before {
content: attr(data-info);
color: #ED3237;
position: absolute;
width: 600%;
top: 120%;
text-align: right;
right: 0;
pointer-events: none;
}
.container>header nav a:hover {
background: #ED3237;
}
.bp-icon:after {
font-family: 'bpicons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-align: center;
color: #ED3237;
-webkit-font-smoothing: antialiased;
}
.container>header nav .bp-icon:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
line-height: 2;
text-indent: 0;
}
.container>header nav a:hover:after {
color: #fff;
}
.bp-icon-next:after {
content: "\e000";
}
.bp-icon-drop:after {
content: "\e001";
}
.bp-icon-archive:after {
content: "\e002";
}
.bp-icon-about:after {
content: "\e003";
}
.bp-icon-prev:after {
content: "\e004";
}
@media screen and (max-width: 55em) {
.container>header h1,
.container>header nav {
float: none;
}
.container>header>span,
.container>header h1 {
text-align: center;
}
.container>header nav {
margin: 0 auto;
}
.container>header>span {
text-indent: 30px;
}
}
.cbp-hrmenu {
width: 100%;
margin-top: 2em;
border-bottom: 2px solid #ED3237;
}
/* general ul style */
.cbp-hrmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
/* first level ul style */
.cbp-hrmenu>ul,
.cbp-hrmenu .cbp-hrsub-inner {
width: 90%;
max-width: 70em;
margin: 0 auto;
padding: 0 1.875em;
}
.cbp-hrmenu>ul>li {
display: inline-block;
}
.cbp-hrmenu>ul>li>a {
font-weight: 700;
padding: 1em 2em;
color: #999;
display: inline-block;
}
.cbp-hrmenu>ul>li>a:hover {
color: #ED3237;
}
.cbp-hrmenu>ul>li.cbp-hropen a,
.cbp-hrmenu>ul>li.cbp-hropen>a:hover {
color: #fff;
background: #ED3237;
}
/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
display: none;
position: absolute;
background: #ED3237;
width: 100%;
left: 0;
}
.cbp-hropen .cbp-hrsub {
display: block;
padding-bottom: 3em;
z-index: 9999;
}
.cbp-hrmenu .cbp-hrsub-inner>div {
width: 33%;
float: left;
padding: 0 2em 0;
}
.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
content: " ";
display: table;
}
.cbp-hrmenu .cbp-hrsub-inner:after {
clear: both;
}
.cbp-hrmenu .cbp-hrsub-inner>div a {
line-height: 2em;
}
.cbp-hrsub h4 {
color: #FFFFFF;
padding: 2em 0 0.6em;
margin: 0;
font-size: 160%;
font-weight: 300;
}
/* Examples for media queries */
@media screen and (max-width: 52.75em) {
.cbp-hrmenu {
font-size: 80%;
}
}
@media screen and (max-width: 43em) {
.cbp-hrmenu {
font-size: 120%;
border: none;
}
.cbp-hrmenu>ul,
.cbp-hrmenu .cbp-hrsub-inner {
width: 100%;
padding: 0;
}
.cbp-hrmenu .cbp-hrsub-inner {
padding: 0 2em;
font-size: 75%;
}
.cbp-hrmenu>ul>li {
display: block;
border-bottom: 4px solid #ED3237;
}
.cbp-hrmenu>ul>li>a {
display: block;
padding: 1em 3em;
}
.cbp-hrmenu .cbp-hrsub {
position: relative;
}
.cbp-hrsub h4 {
padding-top: 0.6em;
}
}
@media screen and (max-width: 36em) {
.cbp-hrmenu .cbp-hrsub-inner>div {
width: 100%;
float: none;
padding: 0 2em;
}
}
<div class="main" style="text-align:center;">
<nav id="cbp-hrmenu" class="cbp-hrmenu">
<ul>
<li>
<a style="color:#000;" href="#">Últimas Notícias</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Brasil</h4>
<ul>
<li>
<a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/4b/2018/01/22/o-advogado-cristiano-zanin-martins-d-defensor-do-ex-presidente-luiz-inacio-lula-da-silva-deixa-o-tribunal-regional-federal-da-4-regiao-trf-4-em-porto-alegre-rs-apos-entrega-de-memoriais-a-1516649842651_615x300.jpg"alt="Notícia" class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
</li>
</ul>
</div>
<div>
<h4>Regional</h4>
<ul>
<li>
<a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/31/2018/01/18/18jan2018---ex-presidente-luiz-inacio-lula-da-silva-participa-de-ato-com-intelectuais-e-militantes-de-esquerda-em-sao-paulo-1516322609642_615x300.jpg"alt="Notícia" class="img-responsive"
/>Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
</li>
</ul>
</div>
<div>
<h4>Cidades</h4>
<ul>
<li>
<a href="#"><img src="https://s2.glbimg.com/jxZANsIWr7mbGHDmCSaJbdA6HDw=/0x0:1920x1080/1000x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2018/m/j/LXUjuDRbqrgCxI6cMqBw/cop.jpg"alt="Notícia"
class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
</li>
</ul>
</div>
</div>
<!-- /cbp-hrsub-inner -->
</div>
<!-- /cbp-hrsub -->
</li>
<li>
<a style="color:#000;" href="#">Regional</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Brasil</h4>
<ul>
<li>
<a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/4b/2018/01/22/o-advogado-cristiano-zanin-martins-d-defensor-do-ex-presidente-luiz-inacio-lula-da-silva-deixa-o-tribunal-regional-federal-da-4-regiao-trf-4-em-porto-alegre-rs-apos-entrega-de-memoriais-a-1516649842651_615x300.jpg"alt="Notícia" class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
</li>
</ul>
</div>
<div>
<h4>Regional</h4>
<ul>
<li>
<a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/31/2018/01/18/18jan2018---ex-presidente-luiz-inacio-lula-da-silva-participa-de-ato-com-intelectuais-e-militantes-de-esquerda-em-sao-paulo-1516322609642_615x300.jpg"alt="Notícia" class="img-responsive"
/>Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
</li>
</ul>
</div>
<div>
<h4>Cidades</h4>
<ul>
<li>
<a href="#"><img src="https://s2.glbimg.com/jxZANsIWr7mbGHDmCSaJbdA6HDw=/0x0:1920x1080/1000x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2018/m/j/LXUjuDRbqrgCxI6cMqBw/cop.jpg"alt="Notícia"
class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
</li>
</ul>
</div>
</div>
<!-- /cbp-hrsub-inner -->
</div>
<!-- /cbp-hrsub -->
</li>
<li>
<a style="color:#000;" href="#">Cidades</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Brasil</h4>
<ul>
<li>
<a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/4b/2018/01/22/o-advogado-cristiano-zanin-martins-d-defensor-do-ex-presidente-luiz-inacio-lula-da-silva-deixa-o-tribunal-regional-federal-da-4-regiao-trf-4-em-porto-alegre-rs-apos-entrega-de-memoriais-a-1516649842651_615x300.jpg"alt="Notícia" class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
</li>
</ul>
</div>
<div>
<h4>Regional</h4>
<ul>
<li>
<a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/31/2018/01/18/18jan2018---ex-presidente-luiz-inacio-lula-da-silva-participa-de-ato-com-intelectuais-e-militantes-de-esquerda-em-sao-paulo-1516322609642_615x300.jpg"alt="Notícia" class="img-responsive"
/>Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
</li>
</ul>
</div>
<div>
<h4>Cidades</h4>
<ul>
<li>
<a href="#"><img src="https://s2.glbimg.com/jxZANsIWr7mbGHDmCSaJbdA6HDw=/0x0:1920x1080/1000x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2018/m/j/LXUjuDRbqrgCxI6cMqBw/cop.jpg"alt="Notícia"
class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
</li>
</ul>
</div>
</div>
<!-- /cbp-hrsub-inner -->
</div>
<!-- /cbp-hrsub -->
</li>
<li>
<a style="color:#000;" href="#">Brasil</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Brasil</h4>
<ul>
<li>
<a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/4b/2018/01/22/o-advogado-cristiano-zanin-martins-d-defensor-do-ex-presidente-luiz-inacio-lula-da-silva-deixa-o-tribunal-regional-federal-da-4-regiao-trf-4-em-porto-alegre-rs-apos-entrega-de-memoriais-a-1516649842651_615x300.jpg"alt="Notícia" class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
</li>
</ul>
</div>
<div>
<h4>Regional</h4>
<ul>
<li>
<a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/31/2018/01/18/18jan2018---ex-presidente-luiz-inacio-lula-da-silva-participa-de-ato-com-intelectuais-e-militantes-de-esquerda-em-sao-paulo-1516322609642_615x300.jpg"alt="Notícia" class="img-responsive"
/>Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
</li>
</ul>
</div>
<div>
<h4>Cidades</h4>
<ul>
<li>
<a href="#"><img src="https://s2.glbimg.com/jxZANsIWr7mbGHDmCSaJbdA6HDw=/0x0:1920x1080/1000x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2018/m/j/LXUjuDRbqrgCxI6cMqBw/cop.jpg"alt="Notícia"
class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
</li>
</ul>
</div>
</div>
<!-- /cbp-hrsub-inner -->
</div>
<!-- /cbp-hrsub -->
</li>
<li>
<a style="color:#000;" href="#">Política</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Brasil</h4>
<ul>
<li>
<a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/4b/2018/01/22/o-advogado-cristiano-zanin-martins-d-defensor-do-ex-presidente-luiz-inacio-lula-da-silva-deixa-o-tribunal-regional-federal-da-4-regiao-trf-4-em-porto-alegre-rs-apos-entrega-de-memoriais-a-1516649842651_615x300.jpg"alt="Notícia" class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
</li>
</ul>
</div>
<div>
<h4>Regional</h4>
<ul>
<li>
<a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/31/2018/01/18/18jan2018---ex-presidente-luiz-inacio-lula-da-silva-participa-de-ato-com-intelectuais-e-militantes-de-esquerda-em-sao-paulo-1516322609642_615x300.jpg"alt="Notícia" class="img-responsive"
/>Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
</li>
</ul>
</div>
<div>
<h4>Cidades</h4>
<ul>
<li>
<a href="#"><img src="https://s2.glbimg.com/jxZANsIWr7mbGHDmCSaJbdA6HDw=/0x0:1920x1080/1000x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2018/m/j/LXUjuDRbqrgCxI6cMqBw/cop.jpg"alt="Notícia"
class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
</li>
</ul>
</div>
</div>
<!-- /cbp-hrsub-inner -->
</div>
<!-- /cbp-hrsub -->
</li>
<li>
<a style="color:#000;" href="#">Esportes</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Brasil</h4>
<ul>
<li>
<a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/4b/2018/01/22/o-advogado-cristiano-zanin-martins-d-defensor-do-ex-presidente-luiz-inacio-lula-da-silva-deixa-o-tribunal-regional-federal-da-4-regiao-trf-4-em-porto-alegre-rs-apos-entrega-de-memoriais-a-1516649842651_615x300.jpg"alt="Notícia" class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
</li>
</ul>
</div>
<div>
<h4>Regional</h4>
<ul>
<li>
<a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/31/2018/01/18/18jan2018---ex-presidente-luiz-inacio-lula-da-silva-participa-de-ato-com-intelectuais-e-militantes-de-esquerda-em-sao-paulo-1516322609642_615x300.jpg"alt="Notícia" class="img-responsive"
/>Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
</li>
</ul>
</div>
<div>
<h4>Cidades</h4>
<ul>
<li>
<a href="#"><img src="https://s2.glbimg.com/jxZANsIWr7mbGHDmCSaJbdA6HDw=/0x0:1920x1080/1000x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2018/m/j/LXUjuDRbqrgCxI6cMqBw/cop.jpg"alt="Notícia"
class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
</li>
</ul>
</div>
</div>
<!-- /cbp-hrsub-inner -->
</div>
<!-- /cbp-hrsub -->
</li>
<li>
<a style="color:#000;" href="#">Cultura</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Brasil</h4>
<ul>
<li>
<a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/4b/2018/01/22/o-advogado-cristiano-zanin-martins-d-defensor-do-ex-presidente-luiz-inacio-lula-da-silva-deixa-o-tribunal-regional-federal-da-4-regiao-trf-4-em-porto-alegre-rs-apos-entrega-de-memoriais-a-1516649842651_615x300.jpg"alt="Notícia" class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
</li>
</ul>
</div>
<div>
<h4>Regional</h4>
<ul>
<li>
<a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/31/2018/01/18/18jan2018---ex-presidente-luiz-inacio-lula-da-silva-participa-de-ato-com-intelectuais-e-militantes-de-esquerda-em-sao-paulo-1516322609642_615x300.jpg"alt="Notícia" class="img-responsive"
/>Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
</li>
</ul>
</div>
<div>
<h4>Cidades</h4>
<ul>
<li>
<a href="#"><img src="https://s2.glbimg.com/jxZANsIWr7mbGHDmCSaJbdA6HDw=/0x0:1920x1080/1000x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2018/m/j/LXUjuDRbqrgCxI6cMqBw/cop.jpg"alt="Notícia"
class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
</li>
</ul>
</div>
</div>
<!-- /cbp-hrsub-inner -->
</div>
<!-- /cbp-hrsub -->
</li>
</ul>
</nav>
</div>
</div>
<!-- Logo Start -->
<div class="container" style="margin-bottom:1%; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #ED3237;">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4" id="logo">
<img src="https://ogimg.infoglobo.com.br/in/14638550-9ee-f9a/FT1086A/420/x20141123-125719.jpg.pagespeed.ic.Z5_e4u1qRW.jpg"alt="Foca" class="img-responsive displayed" width="70%"> <br>
</div>
<div class="col-md-4"></div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
$(function() {
cbpHorizontalMenu.init();
});
</script>
Code at link
At the moment, I put the z-index, it opens over the image.
I need search suggestions, please.