Support » Theme: Spacious » Spacious Dropdown Menu Colours

  • Resolved sturgjoh

    (@sturgjoh)


    Hi,

    I’m really pleased with how easy it has been to create my website and love the theme, but I’m struggling with the colours for the dropdown menu. I know there are lots of posts about this already, which I have tried to follow but I always seem to get into a mess with this.

    Please can you help me to do the following:

    1. The background of the main menu and sub menus to be grey #F5F6F7
    2. The Text to be as it is now in dark pink #CB39A6
    3. On the currently selected page – the menu will show the background in light pink #FBE1F2 and all the others in white as it does now.
    4. When you hover over a main menu item the background would be dark pink #CB399B and the text in white.
    5. When you hover over a submenu item the background would be dark pink #CB399B and the text in white as the submenus currently do.

    So I think I have got most of it working, but just need the points 1 and 4 adding in and I have struggled to do this.

    My current additional CSS is below.

    Thanks in advance for your help.

    John Sturgeon
    All Saints Church, Dedworth.

    =================================
    /* Background colour of the header area */
    #header-text-nav-container
    {
    background-color: #ffffff;
    }

    /* Remove an arrow icon from the main menu bar */
    .sub-toggle{display:none}

    /* Background colour of the main menu bar */
    .main-navigation
    {
    background-color: #ffffee;
    }

    /* Menu bar (Non-hovered)*/
    .main-navigation .menu a {
    background: #ffffff;
    color: #CB39A6;
    }

    /* Menu bar (currently selected page) */
    .main-navigation ul li.current-menu-item a
    {
    color:#CB39A6;
    background:#FBE1F2
    }

    /* Background colour of sub menu item NOT HOVERED */
    .main-navigation ul li ul
    {
    background: #444444;
    }

    /* Sub menu item HOVERED*/
    .main-navigation ul li ul li a:hover,.main-navigation ul li.current-menu-item ul li a:hover
    {
    color: #ffffff;
    background: #CB39A6;
    }

    /* Custom View Pro
    * List child pages Links [ID: 95a077d8nj]
    * Add bullets & indent
    * */
    #pt-cv-view-d2d099cujf .pt-cv-title a {
    list-style-type: square;
    margin-left: 25px !important;
    display: list-item;
    }
    /* Custom View Pro
    * List Sibling & Parent Pages Links [ID: 540ac69fbu]
    * Add bullets & indent
    * */
    #pt-cv-view-540ac69fbu .pt-cv-title a {
    list-style-type: square;
    margin-left: 25px !important;
    display: list-item;
    }

    /* remove date from posts */
    .date { display: none; }

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Hi,

    For background color & hover color of the main menu, you can insert the below-mentioned code inside the Additional CSS box.

    .main-navigation .menu-primary-container, .main-navigation .menu a{
        background: #F5F6F7;
    }
    .main-navigation .menu a:hover{
        background: #CB399B ;
        color: #ffffff;
    }

    Thanks.

    sturgjoh

    (@sturgjoh)

    Hi,

    Thanks for your advice. I have managed to improve the menu and it seems to be easier to interact with now.

    Thanks

    John

    Hi,

    Glad to know your issue is resolved. Feel free to ask again if you get any issue regarding the theme. If you liked this theme, you can help us by leaving a review.

    Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.