Difference between revisions of "Template:Costa Rica/NavBar"

 
(46 intermediate revisions by 3 users not shown)
Line 2: Line 2:
 
<html>
 
<html>
 
<style>
 
<style>
 +
    .navbar-custom {
 +
        top: 12px !important;
 +
        background-color: #f5f5f5;
 +
        margin-bottom: 500px;
 +
    }
  
 +
    /* change the brand and text color */
 +
    .navbar-custom .navbar-brand,
 +
    .navbar-custom .navbar-text {
 +
        color: #3c3c3c;
 +
        font-size: 30px;
 +
        padding-left: 20px;
 +
        padding-right: 20px;
 +
    }
  
−
.dropdown-menu-extra {
 
−
  top: 50%;
 
−
    left: 50%;
 
−
    text-align: center;
 
−
}
 
  
−
.navbar-custom {
+
    .navbar-nav>li {
−
top: 12px !important;
+
        margin-left: 20px;
−
    background-color: #f5f5f5;
+
        margin-right: 35px;
−
margin-bottom:500px;
+
    }
−
}
+
−
/* change the brand and text color */
+
−
.navbar-custom .navbar-brand,
+
−
.navbar-custom .navbar-text {
+
−
    color: #3c3c3c;
+
−
    font-size: 30px;
+
−
padding-left:20px;
+
−
  padding-right:20px;
+
−
}
+
  
−
.navbar-nav > li{
+
    /* change the link color */
−
  margin-left:20px;
+
    .navbar-custom .navbar-nav .nav-link {
−
  margin-right:35px;
+
        color: #3c3c3c;
−
}
+
        font-size: 17px !important;
 +
        font-family: Montserrat !important;
 +
    }
  
−
/* change the link color */
+
    /* change the link color */
−
.navbar-custom .navbar-nav .nav-link {
+
    .navbar-custom .navbar-nav .nav-link.active {
−
    color: #3c3c3c;
+
        color: #705BA0;
−
    font-size: 17px !important;
+
        font-weight: 600;
−
    font-family: Montserrat !important;
+
−
}
+
  
−
/* change the link color */
+
     }
−
.navbar-custom .navbar-nav .nav-link.active {
+
−
     color: #705BA0;
+
−
    font-weight: 600;
+
  
−
}
+
    /* change the color of active or hovered links */
 +
    .navbar-custom .nav-item.active .nav-link,
 +
    .navbar-custom .nav-item:hover .nav-link {
 +
        color: #705BA0;
 +
        opacity: 0.85;
 +
        font-weight: 600;
  
−
/* change the color of active or hovered links */
+
     }
−
.navbar-custom .nav-item.active .nav-link,
+
−
.navbar-custom .nav-item:hover .nav-link {
+
−
     color: #705BA0;
+
−
    opacity: 0.85;
+
−
    font-weight: 600;
+
  
−
}
+
    .dropdown-box {
 +
        background-color: #f5f5f5 !important;
  
−
.dropdown-box{
+
    }
−
background-color: #f5f5f5 !important;
+
  
−
}
+
    .dropdown:hover>.dropdown-menu {
−
 
+
        display: block;
−
.dropdown:hover>.dropdown-menu {
+
        transition-delay: 1s;
−
  display: block;
+
     }
−
}
+
−
 
+
−
.dropdown-item{
+
−
color:#3c3c3c !important;
+
−
     font-size: 12px !important;
+
−
    font-family: Montserrat !important;
+
−
}
+
  
 +
    .dropdown-item {
 +
        color: #3c3c3c !important;
 +
        font-size: 15px !important;
 +
        padding-top:8px;
 +
        padding-bottom:8px;
 +
        padding-left:15px;
 +
        padding-right:15px;
 +
        font-family: Montserrat !important;
 +
    }
 
</style>
 
</style>
  
Line 72: Line 70:
  
 
<script>
 
<script>
−
  $(function(){
+
    $(function () {
  
−
    $('.navbar-nav li').click(function(){  
+
        $('.navbar-nav li').click(function () {
−
      $(this).addClass('active').siblings().removeClass('active');
+
            $(this).addClass('active').siblings().removeClass('active');
−
    });  
+
        });
−
  })
+
    })
 
</script>
 
</script>
  
  
 
<header>
 
<header>
−
<nav class="navbar navbar-expand-md fixed-top navbar-custom shadow " style="margin-bottom:500px;">
+
    <nav class="navbar navbar-expand-md fixed-top navbar-custom shadow " style="margin-bottom:500px;">
−
      <div style="width:11%; margin-right:50px; margin-left:50px; ">
+
        <div style="width:11%; margin-right:20px; margin-left:50px; ">
−
             <img src="https://static.igem.org/mediawiki/2019/8/8d/T--Costa_Rica--logo-diff-easy.png" class="img-fluid">
+
             <a href="/Team:Costa_Rica"><img src="https://static.igem.org/mediawiki/2019/8/8d/T--Costa_Rica--logo-diff-easy.png" class="img-fluid"></image></a>
−
      </div>
+
        </div>
−
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
+
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04"
−
        <span class="navbar-toggler-icon"></span>
+
            aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
−
      </button>
+
            <span class="navbar-toggler-icon"></span>
 +
        </button>
 +
 
 +
        <div class="collapse navbar-collapse navbar-right" id="navbarsExample04" style="padding-left:4%;">
 +
            <ul class="navbar-nav mr-auto">
 +
 
 +
 
 +
                <li class="nav-item">
 +
                    <a class="nav-link" href="/Team:Costa_Rica">Home</a>
 +
                </li>
 +
 
 +
                <li class="nav-item dropdown" style="cursor:pointer;">
 +
                    <a class="nav-link " data-toggle="dropdown" >
 +
                        Team
 +
                    </a>
 +
                    <div class="dropdown-menu shadow " style="margin-top: -3px; left:-65%;">
 +
                        <a class="dropdown-item" href="/Team:Costa_Rica/Team">iGEM Costa Rica</a>
 +
                        <a class="dropdown-item" href="/Team:Costa_Rica/Attributions">Attributions</a>
 +
                    </div>
 +
                </li>
  
−
      <div class="collapse navbar-collapse navbar-right" id="navbarsExample04" style="padding-left:4%;">
 
−
        <ul class="navbar-nav mr-auto">
 
  
 +
                <li class="nav-item dropdown" style="cursor:pointer;">
 +
                    <a class="nav-link " data-toggle="dropdown">
 +
                        Project
 +
                    </a>
 +
                    <div class="dropdown-menu shadow" style="margin-top: -3px; left:-65%;">
 +
                        <a class="dropdown-item" href="/Team:Costa_Rica/Description">Description</a>
 +
                        <a class="dropdown-item" href="/Team:Costa_Rica/Model">Mathematical Model</a>
 +
                        <a class="dropdown-item" href="/Team:Costa_Rica/Computational_Model">Protein Prediction</a>
 +
                        <a class="dropdown-item" href="/Team:Costa_Rica/Results">Results</a>
 +
                        <a class="dropdown-item" href="/Team:Costa_Rica/Supplementary_Material">Supplementary Material</a>
 +
                    </div>
 +
                </li>
  
−
          <li class="nav-item">
+
                <li class="nav-item">
−
            <a class="nav-link" href="/Team:Costa_Rica">Home</a>
+
                    <a class="nav-link" href="/Team:Costa_Rica/Parts">Parts</a>
−
          </li>
+
                </li>
  
−
          <li class="nav-item dropdown">
 
−
            <a class="nav-link " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 
−
              Team
 
−
            </a>
 
−
            <div class="dropdown-menu dropdown-menu-extra shadow dropdown-box" aria-labelledby="navbarDropdownMenuLink">
 
−
              <a class="dropdown-item" href="/Team:Costa_Rica/Team">iGEM Costa Rica</a>
 
−
              <a class="dropdown-item" href="/Team:Costa_Rica/Attributions">Attributions</a>
 
−
            </div>
 
−
          </li>
 
  
−
          <li class="nav-item dropdown">
+
                <li class="nav-item dropdown" style="cursor:pointer;">
−
            <a class="nav-link " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+
                    <a class="nav-link " data-toggle="dropdown">
−
              Project
+
                        Human Practice
−
            </a>
+
                    </a>
−
            <div class="dropdown-menu shadow dropdown-menu-extra" aria-labelledby="navbarDropdownMenuLink">
+
                    <div class="dropdown-menu shadow" style="margin-top: -3px; left:-5%;">
−
              <a class="dropdown-item" href="/Team:Costa_Rica/Description">Description</a>
+
                        <a class="dropdown-item" href="/Team:Costa_Rica/Public_Engagement">Public Engagement</a>
−
              <a class="dropdown-item" href="/Team:Costa_Rica/Model">Modelling</a>
+
                        <a class="dropdown-item" href="/Team:Costa_Rica/Human_Practices">Integrated</a>
−
              <a class="dropdown-item" href="/Team:Costa_Rica/Results">Results</a>
+
                        <a class="dropdown-item" href="/Team:Costa_Rica/Collaborations">Collaborations</a>
−
              <a class="dropdown-item" href="/Team:Costa_Rica/Conclusions">Conclusions</a>
+
                    </div>
−
              <a class="dropdown-item" href="#">Supplemental Material</a>
+
                </li>
−
            </div>
+
−
          </li>
+
  
−
          <li class="nav-item dropdown">
+
                <li class="nav-item dropdown" style="cursor:pointer;">
−
            <a class="nav-link " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+
                    <a class="nav-link " data-toggle="dropdown">
−
              Human Practice
+
                        WetLab
−
            </a>
+
                    </a>
−
            <div class="dropdown-menu shadow dropdown-menu-extra" aria-labelledby="navbarDropdownMenuLink">
+
                    <div class="dropdown-menu shadow" style="margin-top: -3px; left:-5%;">
−
              <a class="dropdown-item" href="/Team:Costa_Rica/Human_Practices">Integrated</a>
+
                        <a class="dropdown-item" href="/Team:Costa_Rica/WetLab">Protocols</a>
−
              <a class="dropdown-item" href="/Team:Costa_Rica/Public_Engagement">Public Engagement</a>
+
                        <a class="dropdown-item" href="/Team:Costa_Rica/Notebook">Notebook</a>
−
              <a class="dropdown-item" href="/Team:Costa_Rica/Collaborations">Collaborations</a>
+
                    </div>
−
            </div>
+
                </li>
−
          </li>
+
                <li class="nav-item">
−
          <li class="nav-item">
+
                    <a class="nav-link" href="/Team:Costa_Rica/Judging">Judging form</a>
−
            <a class="nav-link" href="#">Wetlab</a>
+
                </li>
−
          </li>
+
−
          <li class="nav-item">
+
−
            <a class="nav-link" href="/Team:Costa_Rica/Judging">Judging form</a>
+
−
          </li>
+
  
−
        </ul>
+
            </ul>
−
      </div>
+
        </div>
 
     </nav>
 
     </nav>
 
</header>
 
</header>

Latest revision as of 02:10, 22 October 2019