How do I reposition the menu bar below the header?

Question

How do I reposition the menu bar below the header?

Navigation

#1 by (4 votes)

3

I'm editing a WordPress theme and would like to reposition the menu just below the header image, but how do I do this in CSS?

The site is not yet hosted on the web. I'm modifying the theme before installing everything. The code for the menubar is as follows:

/**************************** MENU***************************/

/*menu topo*/
.menu-topo {width: 100%; height: 50px; background: #B0D6C9; -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.05); box-shadow: inset 0 -2px 5px rgba(0,0,0,.05);}

/*navegacao de topo*/
nav.navegacao ul {float: left; margin: 0; padding: 0; list-style: none;}

/*lista de menu*/
nav.navegacao ul li {position: relative; display: inline-block; margin: 0;     padding:0;  color: #fff;}
nav.navegacao ul li a {color: #fff; line-height: 50px; text-decoration: none; padding: 0 14px; text-transform: uppercase; font-weight: bold;}

/*quando o item menu está ativo ou no hover*/
nav.navegacao ul li:hover,
nav.navegacao ul li.current-menu-item, 
nav.navegacao ul li.current_page_parent {background: rgba(255, 255, 255, 0.57);}

nav.navegacao ul li:hover a,
nav.navegacao ul li.current-menu-item a, 
nav.navegacao ul li.current_page_parent a {color: #85C3AE; }

nav.navegacao ul li:hover:after,
nav.navegacao ul li.current-menu-item:after, 
nav.navegacao ul li.current_page_parent:after {color: #fff; position: absolute; bottom: 0; left: 50%; width: 0; height: 0; margin-left: -5px; vertical-align: middle; content: " "; border-right: 5px solid transparent; border-bottom: 5px solid; border-left: 5px solid transparent;}

/*menu responsivo*/
.menu-responsivo {width: 100%; margin: 8px auto 0; 
 display: none; /*determina que será invisivel de inicio*/
}

The theme is called temabase_mLuv1.1 This is not a free theme available in WordPress but has been made available to download this site .

html css wordpress menu

asked by anonymous 13.10.2015 / 03:12

1 answer

How to calculate the difference of days using input of type "date"? [duplicate] How to implement token to reset password?

score 4 · Accepted Answer

This theme - temabase_mLuv1.1 , seems to be a custom theme, that someone created "for yourself" and did not list it as available in Wordpress repositories or platforms for selling Wordpress Themes, which made your search a little more complicated than normal, but after a few laps, I managed to find that theme.

However, both the theme link you add as a reference in the comments for downloading this theme, such as your own code itself, appear to be different from what you mentioned previously in the comments, hence the reason for my search for this theme as I mentioned above.

Okay, assuming the theme is this , below this code from the menu that you submit- te:

<!-- menu-topo --> 
<div class="menu-topo">
    ...
</div>
<!-- fim menu-topo -->

You'll find a code like this:

<!-- cabeçalho do blog -->
<div class="cabecalho">
    ...
</div>
<!-- fim cabeçalho do blog -->

What you have to do here is change the order of these scripts , that is to move the whole bit of code from - <div class="cabecalho"> until the end of closing of this tag - <div> , for before, ie up of code - <div class="menu-topo"> ... </div>

In other words, the HTML code now looks like this: link

And you'll have to change your order so that they look like this:
link

Note: The code inside the <div class="cabecalho"> in this example is in full HTML, but in your theme code it must have a function in PHP, to generate and render an image as header when you can upload the same way Dashboard from your Wordpress. Do not copy this code from this example and paste it into your theme or this function will stop working , instead cut and paste strong> from your theme as explained above.