css要素を上書きしたい

以下の画像の<ul>タグ内をd-lgblockで消えた時に、humbergerContainerをmyname2の横並びにしたいです。その場合、ulタグ内の要素が邪魔になってしまいます。javascriptで要素を消す以外に方法はありますか？よろしくお願いします。

html
1<!DOCTYPE html>
2<html class="no-js" lang="en">
3<head>
4	<meta charset="utf-8">
5	<meta content="ie=edge" http-equiv="x-ua-compatible">
6	<meta content="width=device-width, initial-scale=1.0" name="viewport">
7	<title>Foundation Starter Template</title>
8	<link href="portforio.css" rel="stylesheet"><!-- CSS only -->
9	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"><!-- JavaScript Bundle with Popper -->
10
11	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js">
12	</script>
13</head>
14<body>
15
16	<header>
17			<div class="container">
18				<div class="row containerTest2">
19					<div class="col-6 myname2">
20						<a href="" style="letter-spacing: 1px;">MIKE INGHAM DESIGN</a>
21					</div>
22						<div class="col-6 d-none d-lg-block">
23							<ul>
24								<li>
25									<span class="Item-Text2"><a href="">HOME</a></span>
26								</li>
27								<li>
28									<span class="Item-Text2"><a href="">ABOUT</a></span>
29								</li>
30								<li>
31									<span class="Item-Text2"><a href="">CONTACT</a></span>
32								</li>
33							</ul>
34						</div>
35					</div>
36					<div class="humbergerContainer">
37						<div class="hunbergerTopline"></div>
38						<div class="humbergerMiddleline"></div>
39						<div class="humbergerborderline"></div>
40					</div>
41			</div>
42	</header>
43</html>

CSS
1html{
2  font-family: sans-serif;
3  font-weight: 500;
4}
5a {
6  position: relative;
7  display: inline-block;
8  text-decoration: none;
9}
10a::after {
11  position: absolute;
12  bottom: -4px;
13  left: 0;
14  content: '';
15  width: 100%;
16  height: 2px;
17  background: #333;
18  transform: scale(0, 1);
19  transform-origin: left top;
20  transition: transform .3s;
21}
22a:hover::after {
23  transform: scale(1, 1);
24}
25.homeMenu{
26  margin: 10px;
27  text-align: right;
28  width: 30%;
29}
30.mynameContainer{
31  width: auto;
32  margin-top: 2rem;
33  margin-left: 6rem;
34  flex-wrap: nowrap;
35}
36
37
38ul{
39  padding-top: 20px;
40  list-style: none;
41  text-align: right;
42  margin-right: 1rem;
43  li{
44    display: inline;
45    list-style: none;
46    padding: 3px 10px;
47  }
48}
49.containerTest2{
50  margin-top: 2rem;
51  display: flex;
52  margin-bottom: 10rem;
53  a{
54  text-decoration: none;
55  font-family: sans-serif;
56  font-size: 20px;
57  line-height: 30px;
58  color: black;
59  margin-left: 5rem;
60  padding-top: 2px;
61  }
62  ul{
63    padding-top: 20px;
64    list-style: none;
65    text-align: right;
66    margin-right: 1rem;
67    li{
68      display: inline;
69      list-style: none;
70      padding: 3px 10px;
71    }
72  }
73}
74.myname2{
75  a{
76    font-size: 20px;
77    padding-top: 23px;
78    margin-left: 0px;
79  }
80}
81.Item-Text2{
82  li{
83    letter-spacing: 1px;
84  }
85  a{
86  font-size: 12px;
87  font-weight: 500;
88  letter-spacing: 1px;
89  }
90}
91
92.humbergerContainer{
93  width:50px;
94  height: 50px;
95  border: 1px solid red;
96}

m.ts10806

2021/05/03 01:00

>画像の<ul>タグ内をd-lgblockで消えた時これは現在のコードではどこで表現されているのでしょうか。

Asopasomaso

2021/05/03 01:09

失礼しました。d-lgblockではなく、 d-lg-blockです。

m.ts10806

2021/05/03 01:14

なるほど。ひとまず「Bootstrap」は質問タグにあった方が良さそうですね。

Asopasomaso

2021/05/03 01:16

大変失礼しました。ご指摘ありがとうございます。

行動規範の内容に同意します

回答1件

ベストアンサー

その場合、ulタグ内の要素が邪魔になってしまいます。

横並びにならないのは、ulが邪魔になっているせいではなく、.humbergerContainerが、.myname2を囲む.rowの外側にあるせいだと思います。

Bootstrapのグリッド機能を使って「横並び」を実現したい場合は、同じ「行(.row)」の内側に、横並びにしたい「列(.col-XXX)」を配置するのが自然ですよね。

例えば、

html
1<div class="row containerTest2">
2    <div class="col-6 myname2">
3        ...
4    </div>
5    <div class="col-6 d-none d-lg-block">
6        <ul> ... </ul>
7    </div>
8    <div class="col-6">
9      <div class="humbergerContainer"> ... </div>
10    </div>
11</div>