Pergunta sobre WordPress Ephemeris: Barra de navegação central

Um usuário perguntou ?

Olá,

Eu queria centralizar a navegação e dar a ela uma largura de 1200px, assim como o Header Flag. (Quiero que esté justo encima de la línea verde y que sea tan ancha) Pero, haga lo que haga, todo lo que tengo que hacer es cortar la barra de navegación en dos filas, como si algún material estuviera oculto en el lado derecho bloqueando o espaço.

É assim que parece agora:

E aqui está o meu código de navegação principal:

.main-navigation {
	text-align: center;
	float: right;
	clear: right;
	margin: 16px 0 0 0;
	margin: 1rem 0 0 0;

}

.main-navigation h1 {
	font-size: 32px;
	font-size: 2rem;
	line-height: 1.25;
}

.nav-menu {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 18px;
	font-size: 1.125rem;
	line-height: 0.3;
	text-transform: uppercase;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation li {
	float: left;
	position: relative;
	margin: 0;
}

/* Padding around each top level menu option */
.nav-menu > li a {
	padding: 12px;
	padding: .75rem
}

.main-navigation ul ul li {
	margin: 0;
}

.main-navigation ul ul a {
	padding: 8px 12px; /* Padding around each dropdown menu option */
	padding: .5rem .75rem;
}

.main-navigation a {
	display: block;
	text-decoration: none;
	color: #6ca83e; /* Nav bar link color */
}

.main-navigation a:visited {
	color: #6ca83e; /* Nav bar link visted color */
}

.main-navigation a:hover {
	color: #376216; /* Nav bar link hover color */
}

.main-navigation ul ul {
	display: none;
	position: absolute;
	left: 0;
	z-index: 99999;
	line-height: 1.7;
	background-color: #6ca83e; /* Nav bar dropdown background color */
}

.main-navigation ul ul ul {
	left: 100%;
	top: 0;
}

.main-navigation ul ul a {
	color: #fff; /* Nav bar dropdown link color */
	width: 14em; /* Nav bar dropdown width */
}

.main-navigation ul ul a:visited {
	color: #fff; /* Nav bar dropdown link visited color */
}

.main-navigation ul ul li {
}

.main-navigation ul ul :hover > a {
	color: #376216; /* Nav bar dropdown level 2 link color on level 3 hover */
	background-color: #344860; /* Nav bar dropdown link background color on hover */
}

.main-navigation li:hover > a {
	color: #376216; /* Nav bar link color on hover */
}

.main-navigation ul ul a:hover {
	color: #fff; /* Nav bar dropdown link color on hover */
}

.main-navigation ul li:hover > ul {
	display: block;
}

.main-navigation li.current_page_item a,
.main-navigation li.current-menu-item a {
}

.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a,
.main-navigation .current_page_parent > a {
	color: #376216; /* Nav bar link color for current menu item or ancestor */
}

.main-navigation ul ul li.current-menu-item > a,
.main-navigation ul ul li.current-menu-ancestor > a {
	color: #376216; /* Nav bar dropdown link color for current menu item */
}

.main-navigation ul .divider {
	border-bottom: 1px solid #aaa;
	height: 0;
	line-height: 0.0625;
	overflow: hidden;
}

.main-navigation ul li.dropdown-header a,
.main-navigation ul li.current-menu-item ul .dropdown-header a {
	color: #aaa; /* Nav bar dropdown header color */
	background-color: #3a3a3a; /* Nav bar dropdown header background color */
}

Tudo de bom Alex

Autor do tópico

(@ahortin)

2 anos, 11 meses atrás

Você pode fornecer um link para o site para que eu possa ver o que está acontecendo? É difícil dizer o que está acontecendo diretamente de uma imagem.

Obrigado por isso.

lançador de tópicos

(@worttaenzer)

2 anos, 11 meses atrás

Obrigado pela sua resposta rápida. Minha página ainda está oculta, devido ao andamento do trabalho, mas percebi que o layout de 2 grades no cabeçalho estava causando o problema. Nesse ponto, meu cliente mudou de ideia e decidiu que a navegação seria alinhada à esquerda, como já é usado no modelo, então infelizmente não preciso mais descobrir como centralizá-la.

Obrigado por pedir ajuda.

Autor do tópico

(@ahortin)

2 anos, 11 meses atrás

Não há problema. Que bom que finalmente foi resolvido ?

lançador de tópicos

(@worttaenzer)

2 anos, 11 meses atrás

Mas eu tenho uma pergunta. Tentei consertar sozinho, mas não funcionou. Na maioria das páginas, com textos longos, meu rodapé está na parte inferior da página a que pertence, mas assim que tenho apenas um texto muito curto (nas páginas “Gästebuch” e “Kontakt”) eu pulo para o rodapé e deixo alguns espaço em branco na parte inferior. Eu tentei mudar a posição do footercontainer e footercreditscontainer, definindo-o para baixo: 0 e brinquei com as configurações de margem, mas nada realmente resolveu. Ou preciso fazer alterações no container de material?

Aqui está um link para isso:

Autor do tópico

(@ahortin)

2 anos, 11 meses atrás

Aqui está um post sobre como você pode colar seu rodapé na parte inferior da página.

lançador de tópicos

(@worttaenzer)

2 anos, 11 meses atrás

Obrigado, eu já tentei isso antes. Mudei um pouco o código, já que nada aconteceria com o original. #Container se tornou maincontentcontainer #header made #headercontainer #footer made #footercontainer Eu colori esses itens para ter certeza de que estou usando o nome div correto, mas ainda assim… o rodapé não está na parte inferior. Acho que a configuração #body não faz nada.

Autor do tópico

(@ahortin)

2 anos, 11 meses atrás

Experimente isso…

#maincontentcontainer {
    min-height: calc(100vh - 356px);
}

No entanto, lembre-se de que, se você alterar a altura de seus cabeçalhos ou rodapés, também precisará ajustar o tamanho do px de acordo.

lançador de tópicos

(@worttaenzer)

2 anos, 11 meses atrás

Isso funciona perfeitamente. Muito Obrigado. Você realmente me ajudou com isso. Ótima ajuda!

Autor do tópico

(@ahortin)

2 anos, 11 meses atrás

Meu prazer ?