problem at display:block;

Posted 5 months ago by utmsandeep

i want to change the display:inline to display:block of my div on onClick event

menubar.blade.php

<nav class="box" >
        <a role="submit" href="#" onClick="changeUl()" class="bars" data-toggle="collapse" data-target="#navbar1"><i class="fa fa-bars"></i></a>
        <h1 style="display:inline" id="heading" class="trim">MobiFixer</h1>
        <div id="navbar1" class="box2">
        <ul id="menuList">
                 <li style=""><a href="/home">Home</a></li>
                 <li ><a href="/">Repair</a></li>
                 <li><a href="#">Buy/Sell</a></li>
                 <li><a href="#">About Us</a></li>
                 <li><a href="#">Track My Gadget</a></li>
                 <li><a href="#">Contact Us</a></li>
                 <li><a href="#" style="background:green;">Member</a></li>
        <ul>
        </div>
</nav>

menubar.css

.box
{
color:white;
z-index: 500;
background:#404040;
width:100%;
padding-top:  20px;
padding-bottom:  20px;
padding-left:10%;

}
.box2 
{
    display:inline-block;
    width:100%;
}

ul
{
    list-style-type:none;
    display:inline;

}
   
li
{
    
    margin:5px;
    display:inline;

}
li>a:link 
{
     
    padding:8px;  
    border-radius: 12px; 
    color:white;
    text-decoration: none; 
    margin-bottom:15px;
    
  
}
li>a:visited
{
    color:white;
    text-decoration: none;
    background:pink;  
}
li>a:hover 
{
    color:white;
    text-decoration:none;
    background:green;
}
li>a:active 
{
    color:pink;
    text-decoration:none;
    background:green;
}
.bars
{
    display:none;
    padding-right:20px;
    color:white;
    background:#404040;
}
device-nav
{
  width:300px;
  height: auto;  
}
@media screen and (max-width: 600px) 
{
    .bars 
    {
        display:inline;
        color:white;
    }
    h1 
    {
        color:blue;
    }
    ul 
    {
        display: block;

    }
    li  
    {
        display: block;
    }
    .box2 
    {
        display:none;
    }

}

menubr.js

 $changeUl()
{
  
  
  document.getElementById("heading").style.color="red";       //working
  document.getElementById("navbar1").style.display="inline";  // not working   ,, responsing nothing
   
}

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.