NEWBIE! Need some clarification on how to change menu links

[:zathura:]

Hello there,

 

Newbie here. I want to change my top menu from this screenshot:

 

to this screen shot:

 

So from what I've been able to read on the forum that would require me to write an entirely new module. Am I right or is there a much simpler way to achieve this?

[dioniz]

You can do it in css file but as it seems to me you have some custom theme, it's hard to say what to change. Is it possible to see your site?

[:zathura:]

  On 5/14/2014 at 9:35 PM, dioniz said:

You can do it in css file but as it seems to me you have some custom theme, it's hard to say what to change. Is it possible to see your site?

Hello Dioniz,

 

I am using the leo fashion template from prestashop, here is a link to the live demo, the site is currently in maintenance mode as I just installed it yesterday:

 

http://www.leotheme.com/demo/prestashop14x/?template=leo_fashion_store

Edited May 14, 2014 by :zathura: (see edit history)

[dioniz]

Ok so first you need to upload your logo. Upload logo in BO > Preferences Themes

To move menu to left open yourdomain/themes/leofash/css/global.css and find this code:

#leo-mainnav .navbar-nav {
    display: inline-block;
    float: none;
    height: 44px;
    margin: 0 auto;
}

Change float:none to float:left;

 

To remove link borders open yourdomain/themes/leofash/css/modules/leobootstrapmenu/themes/default/assets/styles.css and find:

#leo-mainnav .navbar-default .navbar-nav > li > a {
    border-left: 1px solid rgba(0, 0, 0, 0);
    border-right: 1px solid rgba(0, 0, 0, 0);
    color: #000000;
    text-transform: uppercase;
    transition: none 0s ease 0s;
}

Remove both borders and add font-weight:700; and font-size:14px; if you want bigger fonts

 

For those 3 lines under logo i suggest you to make 1px image upload it to your themes img folder and set it as header-logo background

In yourdomain/themes/leofash/css/global.css find

.header-logo {
    display: block;
    text-align: center;
}

and add this: background: url(../img/yourbgimage.png) repeat-x bottom left;

 

Hope this helps