Other than the default navigation menu there is no possibility to add additional menus in Weebly. In our previous article we saw how to add CSS vertical navigation menu and in this article we will check out how to add simple horizontal navigation menu in Weebly. The CSS horizontal menu widget will have single level navigation so that it can be used within smaller space. Here is how you can add a custom horizontal navigation widgets in Weebly site.
Horizontal Navigation Widget
The navigation menu will look something like below and can be customized to any color you want.
Style 1
Style 2
Style 3
CSS for Horizontal Navigation Menu Widget
It has a simple unordered list and the “list-style: none” property is used to hide the bullets. First let us create some styles for the menu list, this is required so that the CSS styles will not interfere with Weebly’s default list styles.
#menu {
line-height: 30px;
}
#menu ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#menu li {
display:inline;
margin:0;
padding:0;
}
Then we have some more style definitions for link and spam elements:
#menu a {
float:left;
background: #FF9933;
border: 1px solid #33CCCC;
border-radius:8px 0px 0px 0px;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#menu a span {
float:left;
display:block;
background: #FF9933;
padding:5px 15px 4px 6px;
color: #000033;
font-weight: 600;
box-shadow: 10px 10px 5px #888888;
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
# a:hover span {
color:#FFF;
}
The complete CSS is given below which is to be added under “Header Code” section of your Weebly page.
<style>
#menu {
line-height: 30px;
}
#menu ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#menu li {
display:inline;
margin:0;
padding:0;
}
#menu a {
float:left;
background: #FF9933;
border: 1px solid #33CCCC;
border-radius:8px 0px 0px 0px;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#menu a span {
float:left;
display:block;
background: #FF9933;
padding:5px 15px 4px 6px;
color: #000033;
font-weight: 600;
box-shadow: 10px 10px 5px #888888;
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
# a:hover span {
color:#FFF;
}
</style>
HTML for Horizontal Navigation Menu
Replace the links and anchor texts in the below HTML code and embed it inside an “Embed Code” element on your Weebly page:
<div id="menu"> <ul> <li><a href="#"><span>WordPress</span></a></li> <li><a href="#"><span>Weebly</span></a></li> <li><a href="#"><span>Wix</span></a></li> <li><a href="#"><span>Squarespace</span></a></li> <li><a href="#"><span>Yola</span></a></li> <li><a href="#"><span>Webs</span></a></li> <li><a href="#"><span>Drupal</span></a></li> <li><a href="#"><span>Joomla</span></a></li> </ul> </div>
Customizing Options
Since the CSS for this widget is very simple, it can be customized as you need. For example, the line-height, background colors and border-radius can be adjusted to change the look.
1 Comment
Leave your reply.