Home Forums Porto Template Menu in Header and Side Menu

This topic contains 3 replies, has 2 voices, and was last updated by  Support2 6 days, 21 hours ago. This post has been viewed 65 times

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #10027946

    muckel_buckel
    Participant

    Hi

    I have a big problem.

    I use your Template and it is great!

    I have one problem only with the menu.
    I work with the feature-headers-flat-top-bar.html and there I have buttons in the menu like Home, … … … ..

    But when I make the screen on computer little bit smaller the 2 last button falling down under the header and you can see it on slider. How can I solve this problem? Pleas help me!

    Secon question. I want put in the menu also some icon like this search icon for example .But I want like in the demo index-corporate-13.html have that when somebody click on this button from the right side open like in this demo slide menu from right where will be standing some openings info for example. How can I make it?

    Thanks a lot and hope you can help me!

    Have a nice weekend !!!

    Daniel



    Template Version: 7.0
    #10027951

    Support2
    Keymaster

    Hello, thanks for your purchase.

    1) You can try reduce the font size and padding. Add in (css/custom.css):

    @media(min-width: 992px) and (max-width: 1199px) {
        #header .header-nav-main nav > ul > li > a {
            font-size: 0.7rem;
            padding: 0 .5rem !important;
        }
    }

    If this solution still don’t solve your issue, the only way is remove some of the top level menu items and add them as sub menu items. Note that the menu has a limit of top level items to add (according to the space of each type of header).

    2) Exactly like the index-corporate-13 it’s not possible since will be needed a lot of changes on the code. But you can do that with the custom code below:

    2.1) Add the button for open the right bar on the header:

    .
    ..
    ...
    ....
    <div class="header-nav-features header-nav-features-no-border header-nav-features-lg-show-border order-1 order-lg-2">
    	<div class="header-nav-feature header-nav-features-search d-inline-flex">
    		<a href="#" class="header-nav-features-toggle" data-focus="headerSearch"><i class="fas fa-search header-nav-top-icon"></i></a>
    		<div class="header-nav-features-dropdown" id="headerTopSearchDropdown">
    			<form role="search" action="page-search-results.html" method="get">
    				<div class="simple-search input-group">
    					<input class="form-control text-1" id="headerSearch" name="q" type="search" value="" placeholder="Search...">
    					<span class="input-group-append">
    						<button class="btn" type="submit">
    							<i class="fa fa-search header-nav-top-icon"></i>
    						</button>
    					</span>
    				</div>
    			</form>
    		</div>
    	</div>
    	<div class="header-nav-feature header-nav-features-search d-inline-flex ml-3">
    		<a href="#" class="header-nav-features-toggle custom-toggle-right-bar" data-focus="headerSearch"><i class="fas fa-bars header-nav-top-icon"></i></a>
    	</div>
    </div>
    ....
    ...
    ..
    .

    * Note that it is a button on the right side of search icon.

    2.2) Add the custom side right bar HTML:

    .
    ..
    ...
    <div role="main" class="main">
    	<div class="custom-right-bar">
    		<a href="#" class="header-nav-features-toggle custom-toggle-right-bar" data-focus="headerSearch"><i class="fas fa-times header-nav-top-icon"></i></a>
    		<div class="custom-right-bar-content">
    			<p>Content goes here!</p>
    			<p>Content goes here!</p>
    			<p>Content goes here!</p>
    			<p>Content goes here!</p>
    			<p>Content goes here!</p>
    			<p>Content goes here!</p>
    			<p>Content goes here!</p>
    			<p>Content goes here!</p>
    			<p>Content goes here!</p>
    			<p>Content goes here!</p>
    		</div>
    	</div>
    ...
    ..
    .

    2.3) Add in (css/custom.css):

    .custom-right-bar {
        position: fixed;
        top: 0;
        right: 0;
        background: #FFF;
        padding: 30px;
        height: 100%;
        width: 100%;
        max-width: 300px;
        transform: translate3d(100%, 0, 0);
        transition: ease transform 300ms;
        z-index: 9999;
    }
    
    .custom-right-bar.opened {
    	transform: translate3d(0, 0, 0);
    }
    
    .custom-right-bar .custom-toggle-right-bar {
    	position: absolute;
    	top: 15px;
    	right: 15px;
    }

    2.4) Add in (js/custom.js):

    $('.custom-toggle-right-bar').click(function(e){
    	e.preventDefault();
    
        $('.custom-right-bar').toggleClass('opened');
    });

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10027972

    muckel_buckel
    Participant

    Thank You !!! Great!!!!

    I can close the Toggle Right Bar when I click on icon close. How can I make it also that when somebody click in the side inside it close also?

    It’s possible to make it slide like the page slide also ?

    Thank you!!!


    #10027976

    Support2
    Keymaster

    Hello,

    To close when click outside the right bar just change the JS code to:

    $(document).on('click', function(e){
    	if( !$(e.target).closest('.custom-right-bar').hasClass('custom-right-bar') && $('.custom-right-bar').hasClass( 'opened' ) ) {
    		$('.custom-right-bar, body').removeClass('opened');
    	}
    });
    
    $('.custom-toggle-right-bar').click(function(e){
    	e.preventDefault();
    	e.stopPropagation();
    
        $('.custom-right-bar').toggleClass('opened');
        $('body').toggleClass('opened');
    });

    And for the slide effect, add in (css/custom.css):

    body {
    	transition: ease transform 300ms;
    }
    body.opened {
    	transform: translate3d(-300px, 0, 0);
    }
    body.opened .custom-right-bar {
    	transform: translate3d(300px, 0, 0);
    }

    Kind Regards,

    Rodrigo.


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