Difference between revisions of "Template:Uppsala/Navbar"

(Editing navbar)
Line 143: Line 143:
  
  
−
html body div.
+
.navbar .menu_button {
 +
width: 100%;
 +
padding: 10px 0px 10px 15px;
 +
float:left;
 +
border-bottom: 1px solid #d3d3d3;
 +
font-size: 12px;
 +
font-weight: bold;
 +
color: #5e5f5f;
 +
cursor: pointer;
 +
}
 +
.navbar .menu_button .expand_collapse_icon {
 +
width:10%;
 +
float:left;
 +
}
 +
 
 +
.navbar .menu_button .expand_collapse_icon::before {
 +
content: "+"; 
 +
}
 +
 +
.open::before {
 +
content: "-" !important; 
 +
}
 +
/* styling for the menu buttons on hover */
 +
.navbar .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover ,  .submenu_button.current_page:hover {
 +
background-color: #3399ff;
 +
text-decoration: none;
 +
color:#ffffff;
 +
}
 +
 +
 
 +
/* IF THE SCREEN IS LESS THAN 1200PX */
 +
@media only screen and (max-width: 1200px) {
 +
 
 +
.navbar #display_menu_control { display:none; }
 +
#menu_content { display:block;}
 +
.menu_button.direct_to_page {padding-left: 17px;}
 +
 +
}
 +
 
 +
/* IF THE SCREEN IS LESS THAN 800PX */
 +
@media only screen and (max-width: 800px) {
 +
 
 +
.navbar { width:100%; height: 15%; position:relative; left:0%;}
 +
.navbar #display_menu_control { display:block; }
 +
#menu_content { display:none;}
 +
.navbar .menu_button .expand_collapse_icon { width: 5%; }
 +
.menu_bottom_padding {display:none;}
 +
 +
}
 +
 
 
</style>
 
</style>
 
<script>
 
<script>
Line 234: Line 283:
  
 
<body>
 
<body>
 +
 +
<div class="menu_button" id="display_menu_control">
 +
MENU 
 +
</div>
  
 
<nav class="navbar navbar-inverse navbar-fixed-top handsy" id="navbar">
 
<nav class="navbar navbar-inverse navbar-fixed-top handsy" id="navbar">

Revision as of 13:52, 1 November 2017