-3
Hallo Leute, ich hoffe, Sie können mir aus irgendeinem Grund helfen, mein Navigationsmenü für die mobile Version wird verkleinert, wenn Sie zu einem echten kleinen Bildschirm wechseln. Wenn der Bildschirm größer ist, habe ich keine Probleme, aber wenn der Browser am kleinsten ist, schneidet er das Navi ("Tours and Daytours") in zwei Hälften. Ich denke, das Problem liegt in .dropdown: Hover .dropdown-Menü-Klasse, aber nicht sicher, wie es zu beheben ist.Problem mit reaktionsfähiger Dropdown-Navigation
function myFunction() {
document.getElementsByClassName("Menu")[0].classList.toggle("responsive");
}/*hide all list items, except for the first one ("Home").
\t Show the list item that contains the link to
\t open and close the topnav (li.icon) */
.Menu li:not(:first-child) {
display: none;
border-bottom: none;
}
.Menu li.icon {
float: right;
display: inline-block;
}
/* The "responsive" class is added to the Menu with JavaScript
\t when the user clicks on the icon. This class makes the Menu look good
\t on small screens */
.Menu.responsive {
position: relative;
}
#TA_socialButtonIcon936 {
width: 28px;
height: 28px;
display: inline-flex;
overflow: hidden;
position: relative;
float: none;
}
.Menu {
margin-top: 15px;
width: 54%;
overflow: hidden;
}
.Menu.stick {
margin-top: 10px;
}
.Menu.responsive li.icon {
position: absolute;
right: 0;
top: -4px;
border: none;
}
.Menu.responsive ul li.icon a {
border-bottom: none;
}
.Menu.responsive li {
float: none;
display: inline;
}
.Menu.responsive li a {
display: block;
text-align: left;
background-color: #161616;
border-bottom: solid 1px #FFFFFF;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/*Dropdown arrow for link items*/
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-menu {
position: absolute;
visibility: hidden;
min-width: 100px;
background-color: #161616;
opacity: 0;
-webkit-transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
}
/* links inside the dropdown*/
.dropdown-menu a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
border-top: solid 1px #FFFFFF;
border-right: solid 1px #FFFFFF;
margin-top: 0px;
}
.dropdown-menu a:last-child {
border-top: 0;
}
/* Change color of dropdown links on hover */
.dropdown-menu a:hover {
color: #755378;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-menu {
visibility: visible;
right: auto;
left: -151px;
bottom: -47px;
opacity: 1;
}<div class="Menu">
<!--Nav-menu-->
<!--Social media button-->
<div id="TA_socialButtonIcon936" class="TA_socialButtonIcon">
<ul id="Ug7Rjth" class="TA_links amVFTKsFPp">
<li id="pyCAn7LGV" class="eYF1SLHKaeE">
<a target="_blank" href="https://www.tripadvisor.com/Attraction_Review-g312578-d2284717-Reviews-Felleng_Day_Tours-Johannesburg_Greater_Johannesburg_Gauteng.html">
<img src="https://www.tripadvisor.com/img/cdsi/img2/branding/socialWidget/20x28_white-21690-2.png" alt="media-icon" />
</a>
</li>
</ul>
</div>
<!--End Social media button-->
<ul>
<!--Start Main ul-->
<li><a href="#">Home</a>
</li>
<li><a href="#">About Us</a>
</li>
<li class="dropdown">
<a class="DropDown-toggle" data-toggle="dropdown" href="#">Tours <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Tours</a>
</li>
<li><a href="#">Day Tours</a>
</li>
</ul>
</li>
<li><a href="#">Contact Us</a>
</li>
<li class="icon"><a href="javascript:void(0);" onClick="myFunction()">☰</a>
</li>
</ul>
<!--End main ul-->
</div>
<!--End Nav-menu-->
Haben Sie Ihr Snippet überprüft? Zeigt nicht den gleichen Weg wie Sie auf dem Bild haben. Kannst du ein exaktes Problem machen, das mit [mcve] replizierbar ist? –
Es tut mir leid Mann nicht immer sicher, wie Code in Stack-Overflow zu implementieren. Das war meine reaktionsschnelle CSS-Seite, sollte ich auch mein CSS-Stylesheet angegeben haben? Aber auf der anderen Seite habe ich es geschafft, die Navigation zu beheben, indem ich den Überlauf aus der .Menu-Klasse entfernt habe. – Frana