Bagaimana cara memindahkan logo web yang sejajar dengan menu navigasi menjadi atas - bawah?

Salam kenal semua. Mau nanya, caranya memindahkan logo web yang sejajar dengan menu navigasi menjadi atas - bawah bagaimana ya?

Maksud saya seperti ini :

FYI saya pakai tema gratisan "Sinatra". Sudah saya ubek-ubek tema nya,tapi belum ketemu.

Barangkali kode ini bisa jadi clue :

#sinatra-header {
  position: relative;
}

#sinatra-header-inner {
  border-style: solid;
  border-left: none;
  border-right: none;
  border-width: 0;
}

#sinatra-header-inner > .si-container {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

#sinatra-header-inner .si-widget-wrapper {
  height: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.si-header-element {
  margin-left: 1rem;
  position: relative;
  z-index: 4;
}

.si-header-element:first-child {
  margin-left: 0;
}

.si-header-element:empty {
  margin-left: 0;
}

========= TAMBAHAN

Ini file header (base.php) :

?>
<?php do_action( 'sinatra_before_header' ); ?>
<div id="sinatra-header" <?php sinatra_header_classes(); ?>>
	<?php do_action( 'sinatra_header_content' ); ?>
</div><!-- END #sinatra-header -->
<?php do_action( 'sinatra_after_header' ); ?>

Ini file logo.php

Ini yang navigation.php

<nav class="site-navigation main-navigation sinatra-primary-nav sinatra-nav si-header-element" role="navigation"<?php sinatra_schema_markup( 'site_navigation' ); ?> aria-label="<?php echo esc_attr( 'Site Navigation', 'sinatra' ); ?>">
<?php

if ( has_nav_menu( 'sinatra-primary' ) ) {
	wp_nav_menu(
		array(
			'theme_location' => 'sinatra-primary',
			'menu_id'        => 'sinatra-primary-nav',
			'container'      => '',
			'link_before'    => '<span>',
			'link_after'     => '</span>',
		)
	);
} else {
	wp_page_menu(
		array(
			'menu_class'  => 'sinatra-primary-nav',
			'show_home'   => true,
			'container'   => 'ul',
			'before'      => '',
			'after'       => '',
			'link_before' => '<span>',
			'link_after'  => '</span>',
		)
	);
}

?>

</nav><!-- END .sinatra-nav -->

avatar gurupenjasmyid
@gurupenjasmyid

1 Kontribusi 0 Poin

Diperbarui 4 tahun yang lalu

1 Jawaban:

Coba aja di headernya dikasih display: flex; flex-direction: column;

Atau kalo pake bootstrap bungkus aja logo sama navigasi di bawahnya di row yang berbeda

Gk tau bisa atau nggak karena gak diliatin struktur htmlnya

avatar zoeldyik
@zoeldyik

15 Kontribusi 9 Poin

Dipost 4 tahun yang lalu

Tanggapan

Sudah saya edit (tambahkan) bang di pertanyaan. Mohon bantuannya ya.

Login untuk ikut Jawaban