Return to Help Center

Welcome to the Bravenet Help Forums. Here you can chat and meet other Bravenet Members. Please do not post advertisements.

Site Builder Discussions
This Forum is Locked
Author
Comment
View Entire Thread
Re: Undo Delete? Accidentally deleted navigation tabs

The navigation component is a bare-bones vertical list without any styling.

You can add styling to your navigation component by adding the following CSS rules to your websites stylesheet.


The following code below will create a horizontal navigation menu with a dropdown.

.navigation {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.navigation a { text-decoration:none; color:black;}
.navigation li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;

padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.navigation li:hover {
background: #555;
color: #fff;
}
.navigation li:hover a {
color: #fff;
}
.navigation li ul {
padding: 0;

top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.navigation li ul li a { color:white; }
.navigation li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
.navigation li ul li:hover { background: #666; }
.navigation li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}


If you need further assistance, please open a support ticket: https://bravenet.com/help/postquestion.php