Home Forums Porto Template Icons menu

This topic contains 8 replies, has 2 voices, and was last updated by  EuX 1 month, 1 week ago. This post has been viewed 124 times

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #10029923

    EuX
    Participant

    Hi Rodrigo…

    I have a problem with the drop-down menu: the text of some items does not fit in the text box and the icon is on top. I did not find where to expand the box the size of the container.

    The other problem is that I had to add a padding to the class “.fa, .fab, .fal, .far, .fas” because the icons that I added to the menu were stuck to the text.

    error


    #10029927

    Support2
    Keymaster

    Hello,

    Porto has some helpers classes for this type of situation:

    Margin classes:
    – ml-1, ml-2, ml-3, ml-4 and ml-5 (margin left. This is good when you have the icon on right side of the text)
    – mr-1, mr-2, mr-3, mr-4 and mr-5 (margin right. This is good when you have the icon on left side of the text)
    * This will generate a space between the icon and text.

    Position relative and top/bottom classes:
    – “position-relative” (will add a position relative to the icon so we can move to top or bottom with the below classes)
    – “top-1” until “top-10” (will move the icon in pixels to bottom)
    – “bottom-1” until “bottom-10” (will move the icon in pixels to top)
    * With those classes you can vertically change the position of the icon.

    Here is an example applying the mentioned classes above:

    <i class="fa fa-folder-open text-4 text-color-primary position-relative top-3 mr-2"></i>

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

    Kind Regards,

    Rodrigo.


    #10029928

    EuX
    Participant

    Excellent thank you very much.


    #10029939

    EuX
    Participant

    Hello Rodrigo, I again …
    I have a problem with the hamburger menu, it is not hidden with the 3 buttons that I indicate in the image, it is necessary to click again on the icon to close the menu.

    Your help is very valuable, thank you.

    Menu


    #10029941

    EuX
    Participant

    I forgot something … the menu “sticky-sidebar”, is not hidden in the mobile version.

    menu3


    #10029947

    Support2
    Keymaster

    Hello,

    1) To hide the 3 red marked dropdown menus on mobile you need this HTML:

    <li class="dropdown d-none d-lg-block">
        ..................
        .................
    </li>
    <li class="dropdown d-none d-lg-block">
        ..................
        .................
    </li>
    <li class="dropdown d-none d-lg-block">
        ..................
        .................
    </li>

    2) To hide the sidebar on mobile:

    <aside class="sidebar d-none d-lg-block" .....................

    Here you can learn more about the display utilities classes: https://getbootstrap.com/docs/4.3/utilities/display/#hiding-elements

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

    Kind Regards,

    Rodrigo.


    #10029950

    EuX
    Participant

    Thanks Rodrigo …
    I did not explain the first point well.
    I do not want to hide the 3 buttons, what I want is that the drop-down menu (mobile version) be hidden, retract when you click on one of these 3 buttons. (with the other buttons if it is hidden, the problem is those 3).


    #10029953

    Support2
    Keymaster

    Hello,

    Thanks for the explanation.

    Try with this code below in (js/custom.js):

    if( $(window).width() < 992 ) {
    
    	$('#header .header-nav-main nav > ul > li > a').on('click', function(e){
    		if( $(this).next().length == 0 ) {
    			$('#header .header-nav-main nav > ul li').removeClass('open');
    		}
    	});
    
    }

    If you want to also close the menu when click one of those 3 items use this code:

    if( $(window).width() < 992 ) {
    
    	$('#header .header-nav-main nav > ul > li > a').on('click', function(e){
    		if( $(this).next().length == 0 ) {
    			$('#header .header-nav-main nav > ul li').removeClass('open');
    
    			setTimeout(function(){
    				$('.header-nav-main nav').collapse('hide');
    			}, 500);
    		}
    	});
    
    }

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

    Kind Regards,

    Rodrigo.


    #10029956

    EuX
    Participant

    Thanks Rodrigo, it worked fine.


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