WordPress WordPress Solução Pergunta: Mova o logotipo para a esquerda da barra de menu de navegação

Um usuário perguntou ?

Olá amigos, tentei mover meu logotipo para a esquerda do menu de navegação, mas até agora não consegui.

Estou usando um tema infantil para o tema vinte.

Meu estilo de navegação CSS é o seguinte:

 * 4.2 Navigation
 * ----------------------------------------------------------------------------
 */

.nav-menu li a {
	color: #333333;
	display: block;
	font-size: 15px;
	line-height: 1;
	padding: 15px 20px;
	text-decoration: none;
}

.nav-menu li:hover > a,
.nav-menu li a:hover,
.nav-menu li:focus > a,
.nav-menu li a:focus {
	background-color: #f5f5f5;
	color: #333333;
}

.nav-menu .sub-menu,
.nav-menu .children {
	background-color: #eeeeee;
	border: none;
	color: #333333;
	border-top: 0;
	padding: 0;
	position: absolute;
	left: 0;
	z-index: 99999;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

ul.nav-menu ul a,
.nav-menu ul ul a {
	color: #333333;
	margin: 0;
	width: 200px;
}

ul.nav-menu ul a:hover,
.nav-menu ul ul a:hover,
ul.nav-menu ul a:focus,
.nav-menu ul ul a:focus {
	background-color: #E6EFF2;
}

.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
	color: #42AABF;
	font-style: italic;
	font-weight: 400;
}

The relevant portion of the theme header is:

			<div id="navbar" class="navbar">
				<a href=" src="ekarjlogo.png" alt="eKarj" /> 
				<nav id="site-navigation" class="navigation main-navigation" role="navigation">
					<button class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></button>
					<a href=" _e( 'Skip to content', 'twentythirteen' ); ?></a>
					<?php
					wp_nav_menu(
						array(
							'theme_location' => 'primary',
							'menu_class'     => 'nav-menu',
							'menu_id'        => 'primary-menu',
						)
					);
					?>
					<?php get_search_form(); ?>
				</nav><!-- #site-navigation -->
			</div><!-- #navbar -->

Este tópico foi alterado 2 anos, 4 meses atrás por.

(@wickensworth)

2 anos, 4 meses atrás

O link para a página é um site de cenário compacto, mas atualmente está assim:

(@sterndata)

Moderador do fórum e voluntário da equipe de suporte

2 anos, 4 meses atrás

Elimine a necessidade de acessar seu link para que possamos ver seu site.

(@sterndata)

Moderador do fórum e voluntário da equipe de suporte

2 anos, 4 meses atrás

A imagem não me permite inspecionar/editar CSS. Com licença.

(@wickensworth)

2 anos, 4 meses atrás

Olá Steve Desculpe, o registro foi deletado.

Ekarj.com/test1

(@sterndata)

Moderador do fórum e voluntário da equipe de suporte

2 anos, 4 meses atrás

.main-navigation {
  clear: none;
  float: left;
  padding-top: 36px;
}
#navbar img {
    float: left;
}
.site-header .search-form {
    float: right;
    margin-top: -45px;
}

Para adicionar CSS: use a opção “CSS adicional” no personalizador.

Descubra como Ferramentas do desenvolvedor do Chrome para ajudá-lo a ver e testar as alterações em seu CSS.

Esta resposta foi modificada há 2 anos e 4 meses por.

(@wickensworth)

2 anos, 4 meses atrás

Obrigado por assistir, Steve. Meu logotipo está no lugar certo agora.

Infelizmente, o menu de navegação não funciona mais e o ícone de pesquisa não aparece. Vou tentar lidar com isso.

Esta resposta foi modificada há 2 anos e 4 meses por.

(@sterndata)

Moderador do fórum e voluntário da equipe de suporte

2 anos, 4 meses atrás

.site-header {
     z-index: 999;
}

(@wickensworth)

2 anos, 4 meses atrás

Obrigada! Funciona muito bem agora. Eu aprecio sua ajuda.

Isto foi útil?

0 / 0

Deixe uma resposta 0

O seu endereço de email não será publicado. Campos obrigatórios são marcados *