0

I have a simple navigation for resolution less than 757px I used bootstrap and pure JavaScript if i resize my desktop browser it works but in mobile browser it doesn't work, even on fiddle it works but in real mobile browser it doesn't work(i have uploaded project to server)

now it doesnt work on desktop either i cant remove d-none class for links

html code

<html>


<head>
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>


<header>

 <div class="clearfix mx-3 my-2 d-md-none">
       <label class="float-left">
           <i class="fas fa-bars fa-2x p-1" role="button" id="sign-one" onclick="show()"></i>
           <i class="fas fa-times fa-2x d-none p-1" role="button" id="sign-two" onclick="hide()"></i>
        </label>
       </div>
       <div id="my-menu">
           <ul  class="list-unstyled d-none" id="links">
           <p><a href="/units" class="text-white">واحدها</a><p>
                            <p> <a href="/fruits" class="text-white">محصولات</a></p>
                             <p> <a href="/pages/درباره-ما" 
                             class="text-white">درباره ما</a></p>
                              <p> <a href="/all" class="text-white">اخبار</a></p>
                             <p> <a href="/contact" class="text-white">ارتباط با ما</a></p>
            </ul>
       </div>

</header>
</body>
</html>

css

#my-menu{
            position: relative;
        }
      
        #links{
            position: absolute;
            padding: 30px 25px;
            border-radius: 7px;
            background-color:  #3CB371;
            text-align: center;
            color: white;
            transition:all .5s ease;
            z-index: 10;
        }

javascript

function show() { 
    document.getElementById("links").classList.toggle('d-none');
    document.getElementById('sign-one').classList.toggle('d-none');
document.getElementById('sign-two').classList.toggle('d-none');
}
function hide() {
  document.getElementById("links").classList.toggle('d-none');
   document.getElementById('sign-one').classList.toggle('d-none');
document.getElementById('sign-two').classList.toggle('d-none');
}

here is the jsfiddle link

thank you in advance

Ramin Safari
  • 19
  • 2
  • 9
  • Can you please clear your requirement? Do you want your drop down navigation shown by default in Desktop and hide in for resolution less than 757px ? – Rahad Rahman Dec 09 '20 at 17:32
  • the last comment of this link helped me [https://stackoverflow.com/questions/52751435/jquery-show-wont-turn-bootstrap-d-none-class-visible](https://stackoverflow.com/questions/52751435/jquery-show-wont-turn-bootstrap-d-none-class-visible) – Ramin Safari Dec 10 '20 at 05:52

2 Answers2

0

Remove d-md-none from <div class="clearfix mx-3 my-2 d-md-none">

John
  • 5,132
  • 1
  • 6
  • 17
  • thanks @John but i don't want the bars(icon of fontawesome) to be seen in md resolution, just in xs and sm resolution – Ramin Safari Dec 09 '20 at 16:52
0

I've changed your code little bit. jsfiddle working demo

HTML

<html>
    <head>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
    </head>
    <body>
        <header>
            <div class="clearfix mx-3 my-2">
                <label class="float-left d-none">
                    <i class="fas fa-bars fa-2x p-1" role="button" id="sign-one" onclick="toggle()"></i>
                    <i class="fas fa-times fa-2x d-none p-1" role="button" id="sign-two" onclick="toggle()"></i>
                </label>
            </div>
            <div id="my-menu">
                <ul class="list-unstyled" id="links">
                    <li>
                        <a href="/units" class="text-white">واحدها</a>
                        <p></p>
                        <p><a href="/fruits" class="text-white">محصولات</a></p>
                        <p><a href="/pages/درباره-ما" class="text-white">درباره ما</a></p>
                        <p><a href="/all" class="text-white">اخبار</a></p>
                        <p><a href="/contact" class="text-white">ارتباط با ما</a></p>
                    </li>
                </ul>
            </div>
        </header>
    </body>
</html>

js

const navIcon = document.querySelector('.float-left')
const menu = document.querySelector('#my-menu')
const signOne = document.getElementById('sign-one');
const signTwo = document.getElementById('sign-two');

function toggle() {
    signOne.classList.toggle('d-none');
    signTwo.classList.toggle('d-none');
    menu.classList.toggle('d-none')
}

function responsive(e) {
    if (window.innerWidth < 757) {
        navIcon.classList.remove('d-none')
        menu.classList.add('d-none')

        // If sign-two not hidden then menu shown on less then 757px screen 
        if (!signTwo.classList.contains('d-none')) {
            menu.classList.remove('d-none')
        }
    } else {
        navIcon.classList.add('d-none')
        menu.classList.remove('d-none')
    }

}

window.addEventListener('resize', responsive);
window.addEventListener('load', responsive);
Rahad Rahman
  • 1,847
  • 2
  • 13
  • 11
  • thanks @rahad this code adds extra white visible space on regular navigation when resolution is above 757 – Ramin Safari Dec 10 '20 at 05:51
  • Then you should remove ` mx-3 my-2` from icon wrapper div i.e: clearfix div. Then add those classes to inner label tag – Rahad Rahman Dec 10 '20 at 14:24
  • thanks @Rahad, I accept your answer, anyway the collapse classes of bootstrap is more efficient than using d-none and javascript to get what i intended to, thanks for your sharing your knowledge – Ramin Safari Dec 10 '20 at 14:30