Home Forums Porto Admin Template Bottom navigation

  • This topic has 9 replies, 2 voices, and was last updated 4 weeks ago by  Support2. This post has been viewed 94 times
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #10030955
    hwinnovations
    Participant

    Hi,

    I’d like to add a navigation to the bottom of the page for the mobile version like a mobile app. How can I do that? Do you have a template page for that? Please let me know.

    I’m going to make pages for mobile access and the bottom navigation system is good to use.

    Thank you so much for the help.

    Mia


    #10030956
    Support2
    Keymaster

    Hello,

    Porto don’t comes with a ready code for this but you can do it with some custom code. For example:

    HTML:

    <nav class="custom-mobile-bottom-navigation bg-primary d-lg-none">
    	<ul class="d-flex list list-unstyled list-inline mb-0">
    		<li class="list-inline-item text-center w-100 py-3 mb-0">
    			<a href="#">
    				<i class="fas fa-home"></i>
    			</a>
    		</li>
    		<li class="list-inline-item text-center w-100 py-3 mb-0 divider-left-border">
    			<a href="#">
    				<i class="fas fa-home"></i>
    			</a>
    		</li>
    		<li class="list-inline-item text-center w-100 py-3 mb-0 divider-left-border">
    			<a href="#">
    				<i class="fas fa-home"></i>
    			</a>
    		</li>
    		<li class="list-inline-item text-center w-100 py-3 mb-0 divider-left-border">
    			<a href="#">
    				<i class="fas fa-home"></i>
    			</a>
    		</li>
    	</ul>
    </nav>

    (css/custom.css):

    .custom-mobile-bottom-navigation {
    	position: fixed;
    	bottom: 0;
    	left: 0;
    	width: 100%;
    	z-index: 9999;
    }

    We hope this helps.

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

    Kind Regards,

    Rodrigo.


    • This reply was modified 1 month ago by  Support2.
    #10030958
    hwinnovations
    Participant

    Thanks for your quick response.

    It did not create the navi menu. It created a box on the bottom…
    https://screencast.com/t/lAS4S3ENDkAL

    When I made a mobile format, the box is now displayed at the top. https://screencast.com/t/lorYTW4ir4

    I’d like to create something like this: https://screencast.com/t/5VhQ6e1yC3Q

    Did I do anything wrong? Thanks for the help.


    #10030971
    Support2
    Keymaster

    Hello,

    Wich version of Porto Admin you are using ? It’s bootstrap 4 based ? If yes this is the issue. The code we sent it’s for the most recent versions of Porto Admin (that uses BS4 classes).

    For BS3 based Porto Admin versions you need this HTML:

    <nav class="custom-mobile-bottom-navigation bg-primary hidden-md hidden-lg hidden-xl">
    	<ul class="list list-unstyled list-inline mb-none">
    		<li class="text-center pt-md pb-md mb-none">
    			<a href="#">
    				<i class="fa fa-home"></i>
    			</a>
    		</li>
    		<li class="text-center pt-md pb-md mb-none">
    			<a href="#">
    				<i class="fa fa-home"></i>
    			</a>
    		</li>
    		<li class="text-center pt-md pb-md mb-none">
    			<a href="#">
    				<i class="fa fa-home"></i>
    			</a>
    		</li>
    		<li class="text-center pt-md pb-md mb-none">
    			<a href="#">
    				<i class="fa fa-home"></i>
    			</a>
    		</li>
    	</ul>
    </nav>

    And this CSS:

    .custom-mobile-bottom-navigation {
    	position: fixed;
    	bottom: 0;
    	left: 0;
    	width: 100%;
    	z-index: 9999;
    }
    
    .custom-mobile-bottom-navigation ul {
    	display: flex;
    }
    
    .custom-mobile-bottom-navigation ul > li {
    	width: 100%;
    }
    
    .custom-mobile-bottom-navigation ul > li > a {
    	color: #FFF;
    	font-size: 24px;
    }

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

    Kind Regards,

    Rodrigo.


    • This reply was modified 4 weeks, 1 day ago by  Support2.
    #10030981
    hwinnovations
    Participant

    Thanks for your reply. It still did not work.

    I currently use the following template. I thought I’m using the latest version. Please let me know how to upgrade the version or buy a new one.
    https://themeforest.net/item/porto-admin-responsive-html5-template/8539472

    Thanks.


    #10030982
    hwinnovations
    Participant

    I just realized that there was bg color. I removed the color and it now shows.
    https://screencast.com/t/VxXwfEA7r7e

    However, it’s positioned at the top. How can I show it at the bottom?
    Thanks for your help again.


    #10030983
    hwinnovations
    Participant

    Please ignore my previous request for support. I positioned it at the top, thinking navi will be placed at the bottom.

    Thanks!!


    #10030984
    Support2
    Keymaster

    Hello,

    By the image you sent seems that’s missing the custom CSS code that I sent for you in my last reply:

    .custom-mobile-bottom-navigation {
    	position: fixed;
    	bottom: 0;
    	left: 0;
    	width: 100%;
    	z-index: 9999;
    }
    
    .custom-mobile-bottom-navigation ul {
    	display: flex;
    }
    
    .custom-mobile-bottom-navigation ul > li {
    	width: 100%;
    }
    
    .custom-mobile-bottom-navigation ul > li > a {
    	color: #FFF;
    	font-size: 24px;
    }

    This will position the custom navigation on bottom of page with a fixed position and over all content (z-index: 9999).

    If you already added this code into your custom.css file, try to clear your browser cache. Here is how to do: http://www.refreshyourcache.com/en/home/

    Regarding how to update Porto Admin for the latest version:
    As you are using the old Bootstrap 3 version this will require a lot of changes into your project, since the latest version uses the Bootstrap 4 and a lot of HTML class names and structure changed from BS3 to BS4. The best way is compare the versions with KDIFF tool (http://kdiff3.sourceforge.net/ ) and follow the instructions on official Bootstrap Migration Guide: https://getbootstrap.com/docs/4.3/migration/

    To get the latest version you don’t need buy a new license of Porto Admin. Just go to your ThemeForest account and download the Porto Admin again.

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

    Kind Regards,

    Rodrigo.


    • This reply was modified 4 weeks, 1 day ago by  Support2.
    #10030989
    hwinnovations
    Participant

    Hi Thank you so much for your prompt support. Your team is truly awesome.

    I have one more question. Now things are working fine, but I’d like to know how to make the menu sticky, so that it stays all the time on the bottom anytime. I’m working on a mobile mockups, and would like to have the bottom menu stays like in the mobile app.
    https://screencast.com/t/jz57eeC9vX

    Do you have a template for the mobile app? I just want to create mobile app mockups with html, and I didn’t like other mobile templates that I bought. Just let me know if you have one template for mobile apps.

    Thanks!


    #10030990
    Support2
    Keymaster

    Hello, thanks for the kind words.

    At really the CSS code we provided for you before should maintain the custom navigation fixed/sticky at any time on bottom of page.

    Can you please send a online link of your website for us ? So we can inspect your code and discover why the CSS code it’s not working for you.

    Regarding the template for mobile app:
    We have the Demo App Landing that comes with Porto HTML5 template: http://preview.oklerthemes.com/porto/7.5.0/demo-app-landing.html

    Kind Regards,

    Rodrigo.


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