Add a shadow and boxed rows to navigation bar

Site URL: https://www.hamiltonthomaslawyers.com.au/

Hi there! I was wondering if someone could help me add a drop shadow to my navigation bar, and also under the "services" dropdown, I'd like to have each service in a bordered row, and when highlighted have the entire row highlight rather then just the words in the row? Thanks so much for the help!!!

Hi @xmanairzz

To add a drop shadow to the header:

• Select Edit Site Header on your page
• Select Style and then Drop Shadow

To add a drop shadow to the folder container, add borders and highlighted rows as you described add this to Custom CSS

/*Adds box shadow to folder container*/
.header-nav .header-nav-item--folder .header-nav-folder-content{
  padding:0;
  box-shadow: 5px 20px 40px 7px #888888;
}

/*Adds bottom border to folder items*/
.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item {
    padding: 10px 15px;
	border-bottom:1px solid #fff;
}

.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item:last-child{
  border-bottom:0px;
}

/*Adds background color to folder items*/
.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item:hover {
    background-color:#7c9391;
}

Here is information on the box shadow property so you can set the values to create the shadow effect you want.

https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

On 2/8/2022 at 9:03 PM, meganheath said:

Hi @xmanairzz

To add a drop shadow to the header:

• Select Edit Site Header on your page
• Select Style and then Drop Shadow

To add a drop shadow to the folder container, add borders and highlighted rows as you described add this to Custom CSS

/*Adds box shadow to folder container*/
.header-nav .header-nav-item--folder .header-nav-folder-content{
  padding:0;
  box-shadow: 5px 20px 40px 7px #888888;
}

/*Adds bottom border to folder items*/
.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item {
    padding: 10px 15px;
	border-bottom:1px solid #fff;
}

.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item:last-child{
  border-bottom:0px;
}

/*Adds background color to folder items*/
.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item:hover {
    background-color:#7c9391;
}

Here is information on the box shadow property so you can set the values to create the shadow effect you want.

https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

Great! Thank you so much. Is there a way to make the whole box in the nav dropdown interactive rather than just the words?

9 hours ago, xmanairzz said:

Great! Thank you so much. Is there a way to make the whole box in the nav dropdown interactive rather than just the words?

Can you provide a bit more detail please? What do you mean by interactive and which "box" are you referring too. Thanks.