cancel
Showing results for 
Search instead for 
Did you mean: 

How to modify Nav-bar category link so it align right & left

SOLVED

How to modify Nav-bar category link so it align right & left

Hello everyone. I am new to Magento 2 and am wondering how would it be possible for me to have both Left and Right Nav bar link for my ecommerce.

 

I tried to edit the Magento_Theme/templates/html/topmenu.phtml without much success.

I think this is because those nav link are embedded into $_menu with the All products tab but I only wish to move some links explained by the image. My blog tab is from a plugin that I installed. My About us tab is a sub category tab. If possible, I would add a FAQ on the right too.

 

 

Example : 

https://ibb.co/qj8CNFm

 

Thank you very much for your support and have a great day. Smiley Happy

1 ACCEPTED SOLUTION

Accepted Solutions

Re: How to modify Nav-bar category link so it align right & left

I found out a solution.

I disabled the blog setting that enabled "viewblog in top menu"

I disabled sub category "view in top menu" for about us

 

I hard coded the link with float right in

Magento_Theme/templates/html/topmenu.phtml

like follow: 

 

<nav class="navigation" role="navigation">
    <ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
        <?php if ($showhomelink) { ?>
            <li class="level0 level-top <?php if ($ishome) { ?> active <?php } ?>">
                <a class="level-top" href="<?php echo $baseUrl; ?>">
                    Home
                </a>
            </li>

        <li class="level0 level-top <?php if ($curr_Url == '/about-us') { ?> active <?php } ?>" style="float:right;">
                <a class="level-top" href="https://myurl/about-us">
                    About us
                </a>
            </li>

<li class="level0 level-top <?php if ($curr_Url == '/faq') { ?> active <?php } ?>" style="float:right;">
                <a class="level-top" href="https://myurl/faq">
                    FAQ   
                </a>
            </li>

<li class="level0 level-top <?php if ($curr_Url == '/blog') { ?> active <?php } ?>" style="float:right;">
                <a class="level-top" href="https://myurl/blog">
                    blog   
                </a>
            </li>



        <?php } ?>

         <?php /* @escapeNotVerified */ echo $_menu; ?>

</ul>
</nav>

 

Thanks

 

The only downside I can see is that the tab blog highlight the home page tab instead of the blog one. Look at the image:

 

https://ibb.co/wL7WMcy

 

Everything else seems to be working

View solution in original post

1 REPLY 1

Re: How to modify Nav-bar category link so it align right & left

I found out a solution.

I disabled the blog setting that enabled "viewblog in top menu"

I disabled sub category "view in top menu" for about us

 

I hard coded the link with float right in

Magento_Theme/templates/html/topmenu.phtml

like follow: 

 

<nav class="navigation" role="navigation">
    <ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
        <?php if ($showhomelink) { ?>
            <li class="level0 level-top <?php if ($ishome) { ?> active <?php } ?>">
                <a class="level-top" href="<?php echo $baseUrl; ?>">
                    Home
                </a>
            </li>

        <li class="level0 level-top <?php if ($curr_Url == '/about-us') { ?> active <?php } ?>" style="float:right;">
                <a class="level-top" href="https://myurl/about-us">
                    About us
                </a>
            </li>

<li class="level0 level-top <?php if ($curr_Url == '/faq') { ?> active <?php } ?>" style="float:right;">
                <a class="level-top" href="https://myurl/faq">
                    FAQ   
                </a>
            </li>

<li class="level0 level-top <?php if ($curr_Url == '/blog') { ?> active <?php } ?>" style="float:right;">
                <a class="level-top" href="https://myurl/blog">
                    blog   
                </a>
            </li>



        <?php } ?>

         <?php /* @escapeNotVerified */ echo $_menu; ?>

</ul>
</nav>

 

Thanks

 

The only downside I can see is that the tab blog highlight the home page tab instead of the blog one. Look at the image:

 

https://ibb.co/wL7WMcy

 

Everything else seems to be working