EverWeb Codebox

Navigation

The EverWeb Navigation Menu

The EverWeb default navigation has quite a few styling options. If these are not enough it's a question of changing the default styles by using some CSS in the site wide Head Code box to overwrite the existing ones.

The extra styles used in this website's navigation are shown below. This menu has an ID #navmenu_menu0 since it is the first time the navigation widget has been used in the project. If another one is inserted, the ID changes to #navmenu_menu1 and so on.

It's important to get the correct ID number so, if in doubt, publish the site to a folder and launch it in the browser to look at the source code. If you don't know what all this means just skip this page!

The styles below are commented to give a clue as to what each one is.

<style type="text/css">

#navmenu_menu0 {

     border-radius: 7px; /* Main menu bar rounded corners */

     -moz-border-radius: 7px; /* Main menu bar rounded corners with vendor prefix for older versions of Firefox */

     -webkit-border-radius: 7px; /* Main menu bar rounded corners with vendor prefix for Chrome and Safari */

     background: #0A4BFF;  /* Fallback background color */

     background: linear-gradient(top, #157FFF 0%, #003 100%); /* Background linear gradient */

     background: -webkit-linear-gradient(top, #157FFF 0%,#003 100%); /* Background linear Chrome and Safarit */

     background: -moz-linear-gradient(top, #157FFF 0%,#003 100%);} /* Background linear gradient old Firefox */

#navmenu_menu0 ul li a {text-align:center;border-right: 1px solid #888;padding-right: 10px} /*navigation block separator */

#navmenu_menu0 ul li:last-child a {border:none} /*separator removed from the last block */

#navmenu_menu0 ul ul li a,

#navmenu_menu0 ul li.active li a,

#navmenu_menu0 ul li:hover ul li a,

#navmenu_menu0 ul li.hover ul li a {

     background:#2D2D2D; /*dropdown menu background color */

     border-bottom:1px solid #888; /*dropdown menu separator */

     padding-left: 10px;} /*space drop down link text a little to the right*/

#navmenu_menu0 ul ul li:last-child a,

#navmenu_menu0 ul li.active li:last-child a,

#navmenu_menu0 ul li:hover ul li:last-child a,

#navmenu_menu0 ul li.hover ul li:last-child a {

     border: none; /* dropdown menu separator removed for the last item */

     border-radius: 0 0 10px 10px;} /*rounded bottom corners added to the last item */

#navmenu_menu0 ul ul li a:hover,

#navmenu_menu0 ul li.active ul li a:hover,

#navmenu_menu0 ul li:hover ul li a:hover,

#navmenu_menu0 ul li.hover ul li a:hover {background:#000000;} /* dropdown menu background mouseover color */

#navmenu_menu0 ul ul li a,

#navmenu_menu0 ul li.active li a,

#navmenu_menu0 ul li:hover ul li a {

     border-right: none;} /* remove vertical separator added to the main menu blocks - !important */

</style>

Current Page

The usual way to have a different color for the link text for the current page is to add a class to the list item in the HTML. Since it is not possible for users to access the navigation menu code it's necessary to slide around the problem by using CSS.


The CSS "nth-child" selector is actually a pseudo selector and looks like this ...  

li:nth-child(3) a{color: #FF0000}

... when applied to the link color in a list. The number in brackets indicates that the third child item in the list will have its color red - no matter what color the rest of them are.


This page is in the "Layout" directory which is third from the left. To change its color to green...


#navmenu_menu0 ul li:nth-child(3) a{color:#00FF00}


This is the "Navigation" page which is the sixth one down.  To change its color to magenta...


#navmenu_menu0 ul ul li:nth-child(6) a{color:#FF00FF !important}


The "!important" instruction is required in this case to override some other stuff in the menu styles and shouldn't be left out.


This is the code that has been pasted into the Head Code box in the Page inspector.


<style type="text/css">

#navmenu_menu0 ul li:nth-child(3) a{color:#00FF00}     /*main menu item */

#navmenu_menu0 ul ul li:nth-child(6) a{color:#FF00FF !important}     /* drop down menu item */

</style>


Find out how to get hex color numbers.

Open An External Page

An external page can be opened from the navigation menu by adding a blank page, giving it an appropriate name and pasting a meta redirect into the head code box in the page inspector.


<meta http-equiv="refresh" content="0;url=http://website.com/page.html" />


Replace the URL - marked in red - with the required one.


If the external page is to open in a new window, it is necessary to resort to a javascript method. Enter the required URL into the code shown below, delete the comments - marked in blue - and paste the code into the head code box as described above for the meta redirect.


<script type="text/javascript">

<!-- window.location="http://everwebapp.com", "_blank" -->

</script>