cancel
Showing results for 
Search instead for 
Did you mean: 

Move Logo Location

Move Logo Location

Hi all,

 

I am new to using magento, and have currently extended the Luma theme and changed the logo to my own. 

 

Currently the logo is in its default left position and I want to move it to the centre. I've been stuck on this for a while. Any help is appreciated.

 

I am using magento2.

3 REPLIES

Re: Move Logo Location

What do you plan on doing with the search box, is it staying where it is on the right hand side level with the logo? You may still like to have the logo in different alignment on mobile/tablet and then show it centrally on desktop. It will be a little tricky to always have the logo centrally but always have the search box on the right. You will likely want to update quite a bit of the css and possibly some of the HTML to make it easier. 

----
If you've found one of my answers useful, please give "Kudos" or "Accept as Solution" as appropriate. Thanks!

Re: Move Logo Location

I have made some progress and have managed to move the logo to the centre (although I'm not sure whether my method is correct) by editing the _module.less file. Unfortunately I am making this on a local host, and so cannot check how it will display on mobile, as of now I'm not too worried if the logo is not centre on mobile devices. 

.logo {
        margin: -8px auto @indent__m 0;

        img {
            max-height: inherit;
            margin-left: 450px;

I do wish to move the search bar and cart into the 'header links' section, above the logo - which I have been trying for a while, if you have any pointers it would be greatly appreciated! I have tried to move element top.search to header.links but no luck!

Re: Move Logo Location

Hi,

 

CSS files are in skin folder as mentioned above.

 

Great tool to debug your css is by using web developer tool of any browser. Through that you can inspect DOM and also get the path of all the css files which are currently active

 

You can also view the real time changes.