I would like to put the top links (Login, Create Account, Log out, …) to my navigation bar. Any idea how?
How to Move Top Links to Navigation Bar in Magento 2
magento2navigation
Related Solutions
Add the following line into yourtheme/layout/default.xml
<move element="top.search" destination="navigation.sections" after="catalog.topnav" />
Copy sections.phtml
from module-theme/view/frontend/templates/html/sections.phtml
to yourtheme/templates/html/sections.phtml
Now open this file and put the following line of code after class="section-items"
DIV
<?php echo $block->getChildHtml('topSearch'); ?>
This is working for me.
I managed to do this by adding the following code to my custom theme. Hopefully this will help others trying to do the same.
vendor/theme/web/css/source/_extend.less
@import '_extend-custom.less';
@import '_navigation_extend.less';
vendor/theme/web/css/source/_extend-custom.less
//
// Desktop
// _______________________________________________
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
// Make the very top bar smaller
// Comes from magento/theme-frontend-blank/Magento_Theme/web/css/source/_module.less
.page-header {
.header.panel {
&:extend(.abs-add-clearfix-desktop all);
padding-bottom: 5px;
padding-top: 5px;
}
}
//Make the space required for the search box a smaller depth
.block-search .control {
border-top: 0;
margin: 0;
padding: 0;
}
// Make the logo smaller
.logo {
margin: 0;
img {
max-height: inherit;
}
}
// Remove the space above the header on the desktop to make the bar thinner
// Comes from magento/theme-frontend-blank/Magento_Theme/web/css/source/_module.less
.header {
&.content {
&:extend(.abs-add-clearfix-desktop all);
padding: 5px @indent__base 0;
}
}
// Reduce the height of the navigation bar
.navigation {
height: 30px;
}
}
vendor/theme/web/css/source/_navigation_extend.less
//
// Desktop navigation
// ---
// Reduce the height of the navigation bar from the standard 53px
@navigation-desktop-level0-item__line-height: 30px;
Best Answer
What we need to do
To move a block you need to use the
<move>
XML instruction, the official docs for this can be found hereFinding the block name
To move a block you first need to find out the block name, in this case I searched for
header links
withinmagento2/app
as I know these css classes are added via the XML. This gives me 2 results:And
If you search these 2 XML files for
header links
you will see where the blocks are called and the name passed to it. Which file you need depends on your fallback structure, if you're falling back to Luma view the first file, if you're falling back to the blank theme use the second file.My theme is using the blank theme so I can see the block name is
top.links
, this is on line 50 ofapp/code/Magento/Theme/view/frontend/layout/default.xml
(If your theme is falling back to Luma I believe the block name isheader.links
).Moving the block
Now we know the class name we can move the block, in my example I have moved the block to the footer. As I want this to happen on every page I have added the below code to
It's important to add this to your own theme and not overwrite Magento's code.
Result
My XML code now looks like so:
Which renders the links in the footer on the front end:
I hope this helps.
Update 1 - Above the nav
To move the links above the nav this is the only line of code required.
Update 2 - In the nav
To add the links inside the nav I think your options are to hardcode them by adding
vendor/magento/module-theme/view/frontend/templates/html/topmenu.phtml
to your theme and adding the links you require there.Or if you need them to be dynamic then you'll beed to do some back-end work to give the
Magento\Theme\Block\Html\Topmenu
block class the ability to check and render account links depending on if the user is signed in. I'm not a back-end dev so I can't help much with this method, if you choose to go down this method the following files may help you out:Update 3 - Add to the same section as the logo and search bar
To find the name of the section that contains the logo and search bar I searched Magento's XML files for the classes used on their parent container which are
header content
. This returns the following code invendor/magento/module-theme/view/frontend/layout/default.xml
:So we can see the container name is
header-wrapper
meaning we can use the below code to move our element there:You can position it where you want with before and after.