4

I successfully created a module which outputs "Hello World" on my CMS homepage. Now, I want to make this module a header / navigation bar which replaces the one of the blank theme. I also successfully created my own theme. So I am basically good to go but I don't know where to start. The structure and workflow of Magento completely confuse me. How do I change the styling of a certain block / module? How do I tell the module to be on the very top of all pages? I know it has something to do with the default.xml but... how? I got a "normal" HTML website with a gallery. I linked my shop there. I want to have a smooth transition from my HTML website to my magento shop meaning the design should match. So how do I get my header in magento to look like this? enter image description here

1

If you declare something in default.xml , it will render in all the pages.

default.xml file looks like

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="header">
            <block class="Er\Sample\Block\Test" name="sample.test" before="-" template="Er_Sample::test.phtml"/>
        </referenceContainer>
    </body>
</page>

Create block file with necessary functions

In test.phtml

<?php echo "Welcome message in all magento pages!!!"; ?>

It will display in all pages header section.

1

Based off your input it sounds like you only want to change the styling?

If you want to make small styling changes you can extend the styling like so:

  1. Create this file - app/design/frontend/Vendor/themename/Magento_Theme/web/css/source/_extend.less
  2. Add your styling here.
  3. Compile your styling, if you don't know how you can read about it here.

If you want to overwrite all the navigation styling then follow these steps:

  1. Copy this file into your theme - vendor/magento/theme-frontend-blank/web/css/source/_navigation.less -> app/design/frontend/Vendor/themename/web/css/source/_navigation.less
  2. Make your styling changes in there
  3. Compile your styling, if you don't know how you can read about it here.
1

I may be late to give an answer for this question. But as a beginner of magento, I have the same problem as yours. I have done it up to some extent and like to share the way I have done it.

1) I first create the basic layout structure of the header, using content tags in default.xml file I placed this in the referenceContainer name="header.container" tags in default.xml file. The reason is, navigation bar goes to the header section.

2) Then I have created a phtml file in magento, which includes the content of the navigation bar. This should be in the Magento_Theme module(Magento_Theme module is a customized module of the module_theme in vendor folder. This customized module should be in, app->design->frontend->vendor->yourtheme->Magento_Theme)

3) After that, call this phtml file using a in between the layout structure where you want to place the nav bar.

e.g:block class="Magento\Framework\View\Element\Template" name="header.nav.section" template="Magento_Theme::custom/head_navbar.phtml" before="-" Here I have created a head_navbar.phtml file which contains the content of nav bar

Hope this will help you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.