Okay
  Public Ticket #2787556
Menu Item
Closed

Comments

  •  21
    Sanjay started the conversation
    May 27, 2021 at 2:03am
    Currently I have COVID-19 announcement at the top right heading area. But on mobile this appears at the bottom of the menu. Is there a way to have this particular page listed at the top of mobile? Even if it's listed twice I don't mind - just want an announcement area at the top of mobile menu.


    Let me know if it is possible thanks!


  •  279
    Noah replied
    May 27, 2021 at 8:25am

    Hello Sanjay,

    Thanks for getting in touch.

    Please share your admin access so that we can have a  closer look and write custom css.

    Thanks,

  •  21
    Sanjay replied
    May 27, 2021 at 11:30am

    Can you provide me with an email and I will set one up.

  •  8,847
    Tahir replied
    May 27, 2021 at 11:48am

    Hey Again,

    You can use any Email Id as we just need a temporary user/pass to login and check.

    Thanks 

    ThemeNectar Support Team 

  •  8,847
    Tahir replied
    May 27, 2021 at 11:50am

    Nevermind the Login credentials.

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    @media only screen and (min-width: 1px) and (max-width: 999px) {
    .off-canvas-menu-container.mobile-only ul.menu {
        display: flex;
        flex-direction: column;
    }
    .off-canvas-menu-container.mobile-only ul.menu li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-14037 {
        order: -1;
    }
}

    Thanks

    ThemeNectar Support Team 

  •   Sanjay replied privately
  •  1,878
    Judith replied
    May 27, 2021 at 5:16pm

    Hi Sanjay,

    We are not able to access your login page as shown here:

    7749659485.png

    Please check with your firewall then let us know.

    Thanks.

  •  21
    Sanjay replied
    May 28, 2021 at 12:02am

    Hi, yes sorry about that. Can you please tell me which country you are trying to log in from? 

  •  1,878
    Judith replied
    May 28, 2021 at 12:06am

    I am from Kenya

  •  21
    Sanjay replied
    May 28, 2021 at 12:13am

    You should be ok now. 

  •  279
    Noah replied
    May 28, 2021 at 8:03am

    Hello Sanjay,

    Thanks for keeping in touch.

    I have move the menu item by adding the css below:

    .off-canvas-menu-container.mobile-only ul.menu li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-14057 {
        order: -1;
    }

    Thanks,

  •  21
    Sanjay replied
    May 28, 2021 at 8:07am

    Is it possible they can be solid like on the desktop version? Really want them to look like announcements rather than just menu items.

  •  279
    Noah replied
    May 28, 2021 at 11:20am

    Hello Sanjay,

    Thanks for keeping in touch.

    I have edited the css to add the background color, you can add the other css features here:

    4596240531.png

    Thanks,

  •  21
    Sanjay replied
    May 28, 2021 at 11:53am

    Ok thanks. I like the backgrounds. I have changed the backgrounds to grey, because when you change the text colour it changes every second menu item to that same colour (there is script in the custom css for that already there). 

    Looks like I will just have to work with the backgrounds... can you change the font size separately or will that change all other menu item also?

  •  8,847
    Tahir replied
    May 28, 2021 at 11:55am

    Hey Again,

    Let us know if you need any further help with this. 

    Cheers 

    ThemeNectar Support Team 

  •  21
    Sanjay replied
    May 28, 2021 at 12:00pm

    The color that you are pointing to in the attached image... what does that relate to? When I change it nothing seems to happen. But I'm guessing it's supposed to make the font white?

  •  8,847
    Tahir replied
    May 28, 2021 at 1:06pm

    Yes, that is correct the "color" attribute is used to set the Color for Texts. 

    Thanks 

    ThemeNectar Support Team 

  •  21
    Sanjay replied
    May 28, 2021 at 1:08pm

    It doesn't work...

  •  8,847
    Tahir replied
    May 28, 2021 at 1:40pm

    Just added the Below Revised Custom CSS. Please check now.

    @media only screen and (min-width: 1px) and (max-width: 1025px) {
    .off-canvas-menu-container.mobile-only ul.menu {
        display: flex;
        flex-direction: column;
    }
    .off-canvas-menu-container.mobile-only ul.menu li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-14057 a:before, .off-canvas-menu-container.mobile-only ul.menu li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-14037 a:before {
        content: "";
        border-radius: 6px!important;
        width: 100%;
        height: 100%;
        position: absolute;
        padding: 3px 5px;
        z-index: -1;
        order: -1;
        left : -3px;
        top: -2px;
    }
    .off-canvas-menu-container.mobile-only ul.menu li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-14037 a:before {
        background-color: #ef8667;
    }
    .off-canvas-menu-container.mobile-only ul.menu li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-14057 a:before {
        background-color: #d4a03f;
    }
    .off-canvas-menu-container.mobile-only ul.menu li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-14037 a ,.off-canvas-menu-container.mobile-only ul.menu li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-14057 a {
        color: #fff !important;
    }
    #slide-out-widget-area .inner .off-canvas-menu-container ul> li:nth-child(2n+1).menu-item-14057 > a {
        color: #ffffff !important;
    }
}


    8630030560.pngClick To Open Larger Image.

    Thanks 

    ThemeNectar Support Team 

  •  21
    Sanjay replied
    May 29, 2021 at 12:30am

    Thanks. The buttons looks great! But the order hasn't taken them to the top... so I added this back in:

     .off-canvas-menu-container.mobile-only ul.menu li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-14037 {

            order: -1; }

    And that seemed to work.