Sub Menu styling – issue on other pages

Home Forums Spacious Free Sub Menu styling – issue on other pages

This topic contains 10 replies, has 2 voices, and was last updated by  Rajesh 2 weeks, 6 days ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1406496

    codeformax
    Participant

    Hi, I have used spacious free theme and developed and uploaded live site at www.newarkmission.org which is a NGO. I have styled the sub menu (from prev forum replies) and it shows as desired in the home page(About us-Sub Menu & Gallery-Sub Menu).But on all other pages, the sub menu under About us looks cramped but under Gallery it looks as desired. Please check this and provide me a suitable solution ASAP. Regards Venthan Das

    #1406511

    Rajesh
    Moderator

    Hi @codeformax,

    Can you go to the Additional CSS box and insert the code mentioned below:

    .main-navigation ul li.current_page_ancestor ul li a, .main-navigation ul li.current-menu-ancestor ul li a{
        font-size: 20px;
        font-weight: 500;
    }

    Thanks.

    #1406667

    codeformax
    Participant

    Hi Rajesh, Thank you so much for your prompt and working solution. My Main Problem has solved. But the sub-menu Item color is in Grey on all pages but the hover works superbly. How to change the sub menu menu-item color before hover aka the Home Page Sub Menu.(Live site is www.newarkmission.org)

    My Complete CSS is as below.,
    /*Menu Size*/
    .main-navigation ul.menu li a {
    font-size: 20px;font-weight:500;padding-left:8px;padding-right:8px;padding-bottom:18px;
    }

    /*Drop Down Menu – width Settings*/
    .main-navigation ul li ul {
    top: 30px;font-size: 20px;font-weight:500;width:auto; white-space:nowrap;
    /* Removes Transperency */
    background: none repeat scroll 0 0 rgba(255, 255, 255, 1);}

    .main-navigation ul li ul li a{
    background: rgba(76, 138, 202, 0.9);color: #fff;font-weight: bold;}

    /*Latest Addition from Rajesh Theme Developer – 18Feb2019 */
    .main-navigation ul li
    .current_page_ancestor ul li a, .main-navigation ul li.current-menu-ancestor ul li a{
    font-size: 20px;font-weight: 500;padding-left:8px;padding-right:8px;padding-bottom:18px;}

    Thanks & Regards.,
    Venthan Das

    #1406681

    Rajesh
    Moderator

    Hi @codeformax,

    For changing the color of the sub-menu on the home page, you can change the color code of code under the color in the section as shown below:

    .main-navigation ul li ul li a{
        color: #00ffff;
    } 

    As you have already inserted the selector above, you can simply replace the ‘color: #fff’ with your desired color code.

    Thanks.

    #1406912

    codeformax
    Participant

    Hi Rajesh,
    Thanks for your reply, but I am Fine with the sub-menu item color on the Home Page and want the same in other pages, as well. (In Other Pages it is in GREY Color, hover works perfectly, in all pages).

    Thanks in advance.
    Regards.

    #1406994

    Rajesh
    Moderator

    Hi @codeformax,

    Can you add the below mentioned code inside the Additional CSS box.

    .main-navigation ul li.current_page_ancestor ul li a, .main-navigation ul li.current-menu-ancestor ul li a{
        color: #fff;
    }

    Thanks.

    #1407103

    codeformax
    Participant

    Hi Rajesh,
    Issue still persists. I want sub menu like Home page with same hover effect in all sub pages.In Sub pages menu items are GREY in color, but works perfectly fine.
    Thanks & Regards.

    #1407153

    Rajesh
    Moderator

    Hi @codeformax,

    Have you removed the code mentioned below? If not, can you try once by removing the below code?

    .main-navigation ul li ul li a{
        color: #00ffff;
    } 

    If this doesn’t work, can you provide your all CSS code from the Additional CSS box?

    Thanks.

    #1429889

    codeformax
    Participant

    Hi Rajesh, Issue still persists, I want to replicate the menu/sub menu styling as home page on all other pages.,
    I am sending you the complete CSS from Additional CSS Box.,

    /*Menu Size*/
    .main-navigation ul.menu li a {
    font-size: 20px;
    font-weight:500;
    padding-left:8px;
    padding-right:8px;
    padding-bottom:18px;
    }

    /*Drop Down Menu – width Settings*/
    .main-navigation ul li ul {
    top: 30px;
    font-size: 20px;
    font-weight:500;
    width:auto;
    white-space:nowrap;
    /* Removes Transperency */
    background: none repeat scroll 0 0 rgba(255, 255, 255, 1);
    }

    .main-navigation ul li ul li a{
    background: rgba(76, 138, 202, 0.9);
    color: #fff;
    font-weight: bold;
    }

    /*From Theme Developers */
    .main-navigation ul li
    .current_page_ancestor ul li a, .main-navigation ul li.current-menu-ancestor ul li a{
    font-size: 20px;
    font-weight: 500;
    padding-left:8px;
    padding-right:8px;
    padding-bottom:18px;
    }

    Thanks & Regards.

    #1435644

    Rajesh
    Moderator

    Hi @codeformax,

    While checking here, the above code provided is also working as intended. In the last code /*From Theme Developers */

    .main-navigation ul li
    .current_page_ancestor ul li a, .main-navigation ul li.current-menu-ancestor ul li a{
    font-size: 20px;
    font-weight: 500;
    padding-left:8px;
    padding-right:8px;
    padding-bottom:18px;
    }

    can you add the code as below
    color: #fff;

    It should look like this after the addition:
    .main-navigation ul li
    .current_page_ancestor ul li a, .main-navigation ul li.current-menu-ancestor ul li a{
    font-size: 20px;
    font-weight: 500;
    padding-left:8px;
    padding-right:8px;
    padding-bottom:18px;
    color: #fff;
    }

    If this doesn’t work, can you provide your login detail to team@themegrill.com to better check onto it?

    Thanks.

    #1441597

    Rajesh
    Moderator

    Hi @codeformax,

    We have fixed the issue. Can you check once if the menu is showing as you desired?

    Thanks.

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

You must be logged in to reply to this topic.