Home Forums Porto Template Navigation button for mobile

This topic contains 2 replies, has 2 voices, and was last updated by  ARA 3 months, 1 week ago. This post has been viewed 156 times

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #10024320

    ARA
    Participant

    Hi there,

    I want to change navigation button icon (mobile) like this.

    When open menu > fa-times

    <button class="btn header-btn-collapse-nav" data-toggle="collapse" data-target=".header-nav-main nav">
    <i class="fa fa-times"></i>
    </button>

    When close menu > fa-bars

    <button class="btn header-btn-collapse-nav" data-toggle="collapse" data-target=".header-nav-main nav">
    <i class="fa fa-bars"></i>
    </button>

    Can I do like this?


    • This topic was modified 3 months, 1 week ago by  ARA.
    • This topic was modified 3 months, 1 week ago by  ARA.
    #10024332

    Support
    Keymaster

    Hello, this is the code that you need:

    HTML:

    <button class="btn header-btn-collapse-nav collapsed" data-toggle="collapse" data-target=".header-nav-main nav">
    	<i class="fa fa-bars"></i>
    	<i class="fa fa-times"></i>
    </button>

    CSS:
    (css/custom.css)

    #header .header-btn-collapse-nav {
    	width: 42px;
    	height: 38px;
    }
    
    #header .header-btn-collapse-nav.collapsed .fa-bars {
    	display: block;
    }
    
    #header .header-btn-collapse-nav.collapsed .fa-times {
    	display: none;
    }
    
    #header .header-btn-collapse-nav .fa-bars {
    	display: none;
    }
    
    #header .header-btn-collapse-nav .fa-times {
    	display: block;
    }

    Kind Regards,

    Jonas


    #10024357

    ARA
    Participant

    Dear support,

    Thanks your perfect reply!

    Best regards,


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