Mova o logotipo para a esquerda da barra de menu de navegação

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

Estou usando um tema de filho para o tópico 20.

Meu estilo de navegação CSS se parece com isso:

 * 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="http://ekarj.com"><img 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="#content">"><?php _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 tema foi modificado há 2 anos, há 4 meses por.

O link da página é um site de estágio compacto, mas atualmente se parece com este: https://imgur.com/a/S4EQ8PT

Elimine a necessidade de fazer login no seu link para que possamos ver seu site.

A imagem não me permite inspecionar/modificar CSS. Desculpa.

Oi Steve, minhas desculpas, o registro foi apagado.

Ekarj.com/test1

.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. https://codex.wordpress.org/CSS#Custom_CSS_in_WordPress

Descubra como o Chrome Developer Tools para ajudá-lo a ver e testar alterações no seu CSS.

Esta resposta foi modificada há 2 anos, 4 meses atrás.

Obrigado por ver isso, 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 resolver isso.

Esta resposta foi modificada há 2 anos, 4 meses atrás.

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

Obrigado! Funciona muito bem agora. Agradeço 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 *