Help with Menu CSS to match dev site to live design

Hi Please could I have some help to stylise my menu on this site - https://tinyurl.com/y7aouudl to look like this one - https://tinyurl.com/o56h34m
Key Changes
- Change Default colour to white. On Hover change to #BD5C4A. When clicked remain #BD5C4A but underlined.
- On Dropdown items. Remove the small Triangular dropdown. On hover of the drop down item the white border is removed. Can it remain visible? i.e. white. It looks like the smaller text items such as Schedule & Fees has a smaller width menu item to the other items (can they all have the same width and just change height wise?)
- Can the spacing of the menu items be reduced so that all items fit in one line as the main site? – Screenshot http://take.ms/QIWLv
- Can the region white line on the menu be removed ?
Support access to the dev site is open

Please dont post anything relating to the website brand name or any website links/screenshots. Please use TinyURL to mask domains / temporary online image host for screenshots. I've had problems with google caching these posts in the past ,which reflects negatively on the brand.
Thanks Tom

  • Ash

    Hello Tom

    First of all, your second URL is not working, so I am giving css just based on your comments.

    I can also see you already overwritten the menu color with custom css and you even have !important in that css. You need to remove that css.

    If you can't remove that css, then try the following css:

    div#page .upfront-output-region-container .upfront-output-module .default ul.menu > li.menu-item > a{
    color: #ffffff !important;
    }
    div#page .upfront-output-region-container .upfront-output-module .default ul.menu > li.menu-item > a:hover{
    color: #BD5C4A !important;
    text-decoration: underline;
    }
    
    li.menu-item-has-children>a:after, li.menu-item.parent>a:after{
    display: none !important;
    }
    
    div.upfront-navigation ul.sub-menu>li{
    min-width: 190px !important;
    }
    
    div.upfront-navigation li.menu-item a:not(.js-ulinkpanel-input-entry){
    padding: 6px 5px !important;
    font-size: 15px !important
    }
    
    .upfront-region-container-header .upfront-region-container-bg{
    border-bottom: none !important;
    }

    I suggest to use a custom css plugin and use the css there, instead of using upfront css editor to avoid conflict with your previously added css on same element.

    Have a nice day!

    Cheers,
    Ash

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.