Click here to Skip to main content
15,867,686 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
hi i have two menu e.g

Second menu i created:

<div class="menu2">
<ul class="center">
<li><a href="" target="_parent"></a></li>
<li><a href="" target="_parent"></a></li>
</ul>	
</div>


First menu. This created from a cms by default:

<div class="top-bar-section">
<ul class="left home-active" data-position="2">
<ul class="center">
<li><a href="" target="_parent"></a></li>
<li><a href="" target="_parent"></a></li>
</ul>
</ul>


i add the il from the second menu to first menu with javascript when the @media screen and (max-width: 640px):

$(window).on("resize", function(){
$(window).width() < 641 ?
$(".menu2").insertAfter(".top-bar-section > .left") :
$(".siteheader__row").prepend($(".top-bar-section .menu2"));
})


when my window width is 641 i have overflow when i refresh the page and my menu didnt scrool

What I have tried:

.top-bar-section{ overflow-x: scroll;}
Posted
Comments
Chris Copeland 27-Jan-23 4:47am    
If you're trying to get it to scroll horizontally (which is odd, a menu shouldn't be scrollable horizontally, usually it's done vertically) then you may need to add a max-width: 100vw property to the .top-bar-section class. CSS needs to know how wide the container will be before it can introduce scrolling. Also (not related to this question) you have two directly nested <ul> elements which isn't valid HTML.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900