Menus options

Home Forums Spacious Free Menus options

This topic contains 13 replies, has 3 voices, and was last updated by  mysoft 5 months ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1404913

    mysoft
    Participant

    Hello Support

    I am managing fine with the Spacious theme but feel my menu and the sub menu dropdowns could be better and clearer.

    I also notice (I cannot explain it) that a small downwards facing arrow is appearing to show the main heading has dropdown menu.

    Should I be using an additional plugin for the menu improvements?

    Any help appreciated.

    #1404969

    Rajesh
    Moderator

    Hi @mysoft,

    Can you explain what do you want to achieve in the menu? We will try to help as much as we can.

    Thanks.

    #1405010

    mysoft
    Participant

    Thanks Rajesh
    Yes .. I want the menus to stand out and a different colour from the text or images it covers as the menu drops down to show the sub menus.

    I find that when the slider has light coloured images the sub menus do not show up well.

    Hope that explains what I am trying to achieve.

    #1405017

    mysoft
    Participant

    #header-right-section {
    width: 100%;
    }

    #header-right-sidebar {
    float: right;
    }

    #site-navigation {
    float: left;
    }

    .header-post-title-container{
    display: none;
    }

    .main-navigation ul li ul li a{
    font-weight: bold;
    }
    .main-navigation ul li:hover ul {
    background: rgba(0, 0, 255, 0.9);
    }

    To explain better Rajesh
    This is the code I have currently in the additional css and when the drop down menu shows I have very light lettering but it only shows clear when I hover over it.
    This is a link to what I am trying to achieve
    https://csswizardry.com/demos/css-dropdown/
    and my colours would be blue and black instead of the red and black shown in the example.
    Any help appreciated.

    #1405132

    Rajesh
    Moderator

    Hi @mysoft,

    Can you add the below-mentioned code inside the Additional CSS box:

    .main-navigation ul li ul li a{
        background: rgba(0, 0, 255, 0.9);
        color: #fff;
    }

    Thanks.

    #1405159

    mysoft
    Participant

    Excellent Rajesh and working perfectly and I like the colour and the menus show up correctly and bold with a white lettering and a nice blue background. I will try to work out the code doing the bold, hoover and font colours.

    I notice one very small issue BUT this may be how it should work.

    If I select any page from a sub menu it works correctly but if I then go to another page on a different dropdown menu and then go back to one I have already looked at, the drop down menu is not bold but still works.

    Is that how it should work?

    #1405291

    Rajesh
    Moderator

    Hi @mysoft,

    To make that selected sub menu bold, can you add the code mentioned below:

    .main-navigation ul li.current-menu-item ul li a{
        font-weight: bold;
    }

    Thanks.

    #1405375

    mysoft
    Participant

    Many thanks Rajesh … I am still getting this small problem with the sub menu not showing as bold IF I had selected any of the pages on the dropdown before. If I go to another heading the dropdowns all show bold but again if I select one of the pages going back it is not bold but the other is bold.

    Please see my rough first website www.mysofttoolkit.co.uk/ to see what I mean when you move between headings and select a page from the sub menu.

    I may have the code in the wrong order?

    .main-navigation ul li ul li a{
    font-weight: bold;
    }

    .main-navigation ul li ul li a{
    background: rgba(0, 0, 255, 0.9);
    color: #fff;
    }

    .main-navigation ul li.current-menu-item ul li a{
    font-weight: bold;
    }

    .main-navigation ul li:hover ul {
    background: rgba(0, 0, 255, 0.9);
    }

    Thanks for looking.

    #1405479

    Rajesh
    Moderator

    Hi @mysoft,

    Can you replace the code provided above(recent one) with this one.

    .main-navigation ul li.current-menu-item ul li a, .main-navigation ul li.current_page_ancestor ul li a, .main-navigation ul li.current-menu-ancestor ul li a{
        font-weight: bold;
    }

    Thanks.

    #1405525

    mysoft
    Participant

    Sorry Rajesh .. still the same .. am I missing something orI have I the code in the wrong order?

    .main-navigation ul li ul li a{
    font-weight: bold;
    }
    .main-navigation ul li ul li a{
    background: rgba(0, 0, 255, 0.9);
    color: #fff;
    }
    .main-navigation ul li.current-menu-item ul li a, .main-navigation ul li.current_page_ancestor ul li a, .main-navigation ul li.current-menu-ancestor ul li a{
    font-weight: bold;
    }
    .main-navigation ul li:hover ul {
    background: rgba(0, 0, 255, 0.9);
    }

    #1405729

    Rajesh
    Moderator

    Hi @mysoft,

    Are you working on a different site? If so, can you provide us URL to your site so that we can inspect it and give you a proper solution?

    Thanks.

    #1405765

    mysoft
    Participant

    Thanks Rajesh ..

    I have 2 sites using Spacious and My test Site is my test site so I can test my import of table before using on my main site.

    Both the test and the main site have Spacious as the theme and the same additional css code.

    I am very close but if I select a menu heading and then view a page and then select another main heading from the menu the go back to the first heading this and the sub menu are no longer bold. It is not a big issue but I simply want to keep all the main headings and the sub menus drop down as bold.

    Any help appreciated and thanks for all your help in getting me this far.

    #1405874

    Nilan
    Moderator

    Hi,

    It seems like you have set font-weight for only default sub-menus .main-navigation ul li ul li a. You will need to over-wright sub-menus of current page menu as well. We have provided custom CSS for a solution previously by our team member @Rajesh. Or you can replace those CSS with the CSS code below.

    .main-navigation ul li.current-menu-item ul li a, .main-navigation ul li ul li.current-menu-item a, .main-navigation ul li.current_page_ancestor ul li a, .main-navigation ul li.current-menu-ancestor ul li a, .main-navigation ul li.current_page_item ul li a {
        font-weight: bold;
    }

    We can see all sub-menu fonts in bold after adding those CSS in our local environment. Please add those CSS to the additional CSS. If the issue still exists let us know.

    Regards

    #1405898

    mysoft
    Participant

    Many thanks Nilan
    It is my fault as I am not sure on additional CSS but will work away as the best way to understand is to experiment with the code you have supplied.
    Many thanks for your great help in this issue.

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.