Okay
  Public Ticket #3428928
Mobile menu custom
Closed

Comments

  • NortiaLuca started the conversation

    Hi, I'm trying to create the mobile menu as in the photo, instead of intervening on the style of the present menu, can I rewrite the menu from scratch? So that we can define the two symmetrical columns etc... and using the already working nav menu? In desktop mode I did it by intervening on the header.php but for mobile I can't find the right section. Thanks

    Attached files:  test.JPG

  •  279
    Noah replied

    Hi there,

    Can you clarify a bit more on what exactly you need from the mobile menu, do you mean you want to split it to have two columns?

    Let us know in reference to what is present on the link you provided and we will see what is possible.

    Thanks.

  • NortiaLuca replied

    I would like to change this menu not only in style, but by rewriting its structure, with 2 columns of the same width, one containing the navmenu and one the logo.

    Attached files:  Cattura.JPG

  •  279
    Noah replied

    Hi there,

    This is not something that can be done with the theme options and you will need some extensive customization which I'm afraid we are not able to offer due to support scope limitations. 

    We are however partnered with a trusted provider of expert-level Salient customization. If you are interested in initiating a project, we recommend referring to our guide at the following link: https://themenectar.com/salient/customization/

    Hope you understand.

  •  8,839
    Tahir replied

    Hey Again,

    There is no need to make the edits to the template as it can be achieved using CSS alone.

    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 (max-width: 999px) {
        html body #header-outer[data-has-menu][data-format] #top .row .span_3,#header-outer #top .row .col.span_9 {
            width: 50% !important;
        }
        #header-outer[data-has-menu][data-format] #top .row {
            display: flex;
            justify-content: unset;
            flex-direction: row-reverse;
        }
        html body #header-outer[data-has-menu][data-format] #top .row .span_3 {
            display: flex;
            justify-content: center;
        }
        #header-outer[data-format=centered-menu-bottom-bar] #top .span_9, #top .col.span_9 {
            left: 0 !important;
            right: auto !important;
        }
    }

    Thanks


    ThemeNectar Support Team