Home Forums Porto Template mobile menu questions

This topic contains 1 reply, has 2 voices, and was last updated by  Support2 1 year ago. This post has been viewed 858 times

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #10022830


    Hello Support,

    I am working with your Porto HTML5 template. I have a few questions about the mobile menu.

    1. I would like to change the breakpoint at which the mobile menu toggle/hamburger menu appears. I would like the regular menu to appear on tablets in PORTRAIT orientation. I have searched for the media queries, but haven’t found the ones that seem to control this setting.

    2. The three white lines in the hamburger menu do not appear on either my iPhone 5s or iPad. It is showing up only as a blue square. When I view your demo on my iphone, the white lines do show up. When I upload that same file to my server, including all dependent files, the 3 white bars do not show up.
    Compare: http://preview.oklerthemes.com/porto/5.7.2/index-header-navbar.html and http://www.mstardesign.com/learncentral/index-header-navbar.html

    3. When you open the toggle/hamburger menu, the arrow icons that indicate there is a drop down list are not appearing. As with #2 above, the arrows show up on my phone when I preview your online demo, but when I load that same file on my server, they do not show up. Compare: http://www.mstardesign.com/learncentral/index-header-navbar.html and http://preview.oklerthemes.com/porto/5.7.2/index-header-navbar.html.

    4. Do you have a sample of a classic mobile menu, the type that looks like a regular drop down list?

    5. I turned the sticky header off on mobile because the drop down navigation menu doesn’t scroll. Is there a way to fix that?

    6. I would like the logo to become smaller in mobile view and I would like to move the toggle/hamburger menu up next to it.

    7. Is the data-sticky-width and heights supposed to control the size of the logo in the sticky header? Mine does not appear to be resizing.
    <div class=”header-logo”>LearnCentral</div>

    Thank you in advance for your help!
    Christine Lemay



    Hello Christine, thanks for your purchase.

    1) Sorry but this is a hard thing to do, since will be needed to modify a lot of lines of code, so this is out of our support scope. You can find all code of header/menus on the file css/theme.css around line 35 until 1800.

    2) As you can see on image below, it’s missing the font awesome font file on server:

    Make sure that the file fonts is inside the folder vendor/font-awesome/fonts/ on server.
    * Also consider to verify the files of Simple-Line-Icons, as you can see on image also is missing the file fonts of these icons.

    3) As you are using the option “stickyStartAt: 0”, you need to set the “stickyChangeLogo” to “false”. Once don’t is possible change logo with sticky start value 0.

    4) I don’t understand exactly what type of mobile menu you wish, but for now Porto have only one type of mobile menu that is the menu you saw in our preview.

    5) You can activate the sticky on mobile. As i said on item 3, you need to set the “stickyChangeLogo” to “false” when use the sticky start at 0.

    6) To reduce the logo on mobile add in (css/custom.css):

    @media(max-width: 767px) {
    	html:not(.sticky-header-active) #header .header-logo img {
    		width: 150px !important;
    		height: auto !important;
    	html.sticky-header-active .header-btn-collapse-nav {
    		margin: 40px 0 11px 15px !important;

    To change position of button next to logo, also add in (css/custom.css):

    @media(max-width: 767px) {
    	.header-btn-collapse-nav {
    		float: left !important;
    		left: 200px;

    7) Is not working because you are using the sticky set top with value 0. Try with that code to header:

    <header id="header" class="header-no-border-bottom has-nav-bar" data-plugin-options="{'stickyEnabled': true, 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': true, 'stickyStartAt': 120, 'stickySetTop': '-120px', 'stickyChangeLogo': true}">

    Also change the logo image code to:

    <a href="index.html"><img alt="LearnCentral" width="294" height="59" data-sticky-width="150" data-sticky-height="30" data-sticky-top="97" src="img/learncentral/logoLearnCentral.png"></a>

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

    Kind Regards,


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