Requiring a background colour for the sidebar

Hi Jordan,

Thanks for that. It’s working well now. Just another question in regards to the position of the coloured sidebar, is it possible for the colour to start under the submenu and below the black line (please see attached screenshot – https://www.dropbox.com/s/qsfovc4o97cx9fs/Screen%20Shot%20-%20coloured%20sidebar.jpg?dl=0).

Regards,

Steffen

Hi Andy,

Thanks for that. That’s great and has worked well. There is another issue however, when you click on the sidebar links, the formatting changes. Please see attached screenshoot showing before and after clicking the link (https://www.dropbox.com/s/scydq2pvfocvqnt/Screen%20Shot-sidebar-links.jpg?dl=0). I’m trying to find the coding for this but don’t seem to have any luck. Could you help with this.

Regards,

Steffen

Thanks Vinay. The code was helpful though there are still a couple of issues that I can’t seem to work out. The height of the navy background is higher than the rest of the links and there’s a slight gap between the first and second links as well as no white bottom border. Please see attached screenshot. (https://www.dropbox.com/s/aj2mxwqdk0ubc15/Screen%20Shot%20-%20%20Sidebar%20link%20format.jpg?dl=0)

I tried playing around with the code but nothing seemed to change any of the issues. Would you have any thoughts on how to fix this?

Regards,

Steffen.

Hi Andy,

Thanks for that but the sidebar menu format changes when ‘Horse Racing Tours’ is selected. If you click on the URL
http://ambassadortravel.com.au/new/home/ or alternatively go to http://ambassadortravel.com.au/new/ –> Our Tours –> Horse Racing Tours you’ll see the format change with the navy background height increased where it reads ‘Horse Racing Tours’ (which is in yellow) and increased gap between the first and second sidebar menu (Please see attached screenshot) https://www.dropbox.com/s/aj2mxwqdk0ubc15/Screen%20Shot%20-%20%20Sidebar%20link%20format.jpg?dl=0

Any ideas why this is happening?

Regards,

Steffen

Hi Vinay,

Thanks for your response but it hasn’t really changed too much, only sightly decreasing the navy background height of the’Horse Racing Tours’ link but the gap still remains. http://ambassadortravel.com.au/new/home/
I can’t work out what is causing this problem. Do you think that there may be some overriding code? Just to note, this is what I currently have in the Quick CSS field. Is there some other code I need to be looking at?

Regards,

Steffen

.avia-menu-text{
font-size: 15px;
}

.av-subnav-menu a:hover, .alternate_color .main_menu ul:first-child > li a:hover, .alternate_color .main_menu ul:first-child > li.current-menu-item > a, .alternate_color .main_menu ul:first-child > li.current_page_item > a, .alternate_color .main_menu ul:first-child > li.active-parent-item > a {
color: red;
background: blue;
}

.av-subnav-menu a:active, .alternate_color .main_menu ul:first-child > li a:hover, .alternate_color .main_menu ul:first-child > li.current-menu-item > a, .alternate_color .main_menu ul:first-child > li.current_page_item > a, .alternate_color .main_menu ul:first-child > li.active-parent-item > a {
background: red;
}

.widget.widget_nav_menu a {
background: #01226f;
color: white;
border-bottom: 1px solid white;
padding: 0px 20px;
font-weight: normal;
text-align: left;
}

.widget.widget_nav_menu a:hover {
color: orange;
}

h3.widgettitle {
text-align: center;
color: black;
background: white;
margin: 0px;
padding 0px 100%;
line-height: 30px;
}

.widget_nav_menu h3.widgettitle {
text-align: center;
color: white;
background: black;

font-weight: normal;
}

.textwidget {
margin-top: 10px;
text-align: center;
color: white;
font-size: 12px;
line-height: 22px;
}

.widget_nav_menu ul:first-child>.current-menu-item, .main_color .widget_nav_menu ul:first-child>.current_page_item {
background:transparent;
}

.current_page_item>a, .main_color .sidebar .current-menu-item>a {
color:gold;
padding-left:20px!important;
}

#top .av-submenu-pos-left {
text-align: left;
padding-left: 420px;
}

td {
font-size: 16px;
padding: 0px 0px;
border-width: 0px;
border-left: none;
border-top: none;
}

.widget_nav_menu ul:first-child>.current-menu-item>a, .widget_nav_menu ul:first-child>.current_page_item>a {
padding-top:0px!important;
}

Hi Ismael,

Thanks for that but I’m still experiencing issues, please see attached screenshot showing the issues: https://www.dropbox.com/s/u5xptw2j4oxjn4p/Screenshot%20-%20sidebar%20issues%20-%20enfold.jpg?dl=0

1. There is a white space going through the background of the selected link and following through to other elements of right hand side of page
2. The background height of the selected link has increased
3. The text of the selected link is no longer centred vertically, heading more towards the top of the background.

Could there be some issues with the initial code setup for the sidebar? Any ideas would be greatly appreciated.

Regards,
Steffen