• 受付
  • すぐに回答を!

CSSか。ナビゲーションバーが画像に重ならない

  • 質問No.9665348
  • 閲覧数63
  • ありがとう数0
  • 気になる数0
  • 回答数0

お礼率 47% (50/105)

WordPressでテーマを自作しています。
http://atsumare.wp.xdomain.jp/
固定ページおよび投稿ページでヘッダー画像にナビゲーションバーが重ならなくて困っています。
以下にソースを記載しますので回答を頂きたいです。
header-1.php
<!DOCTYPE html>
<html lang="ja"><!--日本語のサイトであることを指定-->
<head>
<meta charset="UTF-8"><!--エンコードがUTF-8であることを指定-->
<meta name="viewport" content="width=device-width, initial-scale=1.0 "><!--viewportの設定-->
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--スタイルシートの呼び出し-->
<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"><!--font-awesomeのスタイルシートの呼び出し-->
<link rel="shortcut icon" href="ファビコン画像のURL"> <!-- ファビコン画像設置 -->
<?php wp_head(); ?><!--システム・プラグイン用-->
<!--<?php wp_title(); ?> サイトタイトル -->
</head>
<body <?php body_class(); ?>>
<header class="header-image">
<nav>
<?php wp_nav_menu( array('menu' => 'test_menu' )); ?>
</nav>
<img src="http://atsumare.wp.xdomain.jp/wp-content/uploads/2019/09/page-header.jpg" alt="" width="100%">
<h1><?php the_title(); ?></h1>
</header>
<div class="clear"></div>

style.css(一部抜粋)
.clear {
clear:both;
}
header {
background-size:100%;
background-repeat:no-repeat;
margin-bottom:15px;
background-attachment: fixed;
overflow: hidden;
}
.right-dw img {
float:left;
}
.red {
color:#ff0000;
font-weight:bold;
}

/****************************************
PC用
****************************************/
@media screen and (min-width: 641px){
/* ページヘッダー */
body.home header.header-image {
background-image:url("http://atsumare.wp.xdomain.jp/wp-content/uploads/2019/09/bg.jpg");
height:600px;
}
header img{
display:block;
top:0;
left:0;
margin-left:auto;
margin-right:auto;
}
h1 {
position:absolute;
top:0;
left:0;
margin-left:50px;
margin-top:150px;
color:#fff;
font-size:48pt;
}
/* ナビゲーションバー */
ul#menu-menus {
width:600px;
border-top:solid 2px #fff;
height:35px;
border-bottom:solid 2px #fff;
display:block;
margin-left:auto;
margin-right:auto;
}
ul#menu-menus li {
width:100px;
list-style-type: none;
text-align: center;
margin:auto;
float:left;
}
ul#menu-menus li a {
line-height: 35px;
color: #fff;
}
ul#menu-menus li a:hover {
color: #fff;
width:10px;
opacity:0.5;
}
ul#menu-menus li:last-child{
margin-right: 0;
}
現在回答を募集しています。
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ