Home › Forums › Porto – Responsive HTML5 Template › Icons menu
- This topic has 8 replies, 2 voices, and was last updated 4 years, 9 months ago by EuX. This post has been viewed 958 times
-
AuthorPosts
-
June 6, 2019 at 5:49 pm #10029923EuXParticipant
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.
June 6, 2019 at 10:18 pm #10029927Support2KeymasterHello,
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.
June 6, 2019 at 11:42 pm #10029928EuXParticipantExcellent thank you very much.
June 7, 2019 at 3:04 pm #10029939EuXParticipantHello 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.
June 7, 2019 at 3:13 pm #10029941EuXParticipantI forgot something … the menu “sticky-sidebar”, is not hidden in the mobile version.
June 7, 2019 at 9:38 pm #10029947Support2KeymasterHello,
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.
June 8, 2019 at 12:01 am #10029950EuXParticipantThanks 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).
June 8, 2019 at 5:10 am #10029953Support2KeymasterHello,
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.
June 8, 2019 at 6:00 am #10029956EuXParticipantThanks Rodrigo, it worked fine.
-
AuthorPosts
This topic is marked as "RESOLVED" and can not rceive new replies.