Top menu not responsive

[Zeryk]

1.6.0.9

 

On my desktop screen all buttons are fitted in main top horizontal menu, but when I open site on my laptop , the one of the buttons go below the menu bar. So menu seems to not shinking according the screen 13in.

Anybody advice where I can edit that option? 

Thanks

[nutxlago]

Well, it depends on how many entries you want in the top horizontal menu... there is always a limit.

I think you can edit your-theme/css/modules/blocktopmenu/superfish_modified.css (around line 60) to modify right and left padding for each entry, font-size,etc... My top menu has these rules applied, for example:

 

 .sf-menu > li > a {

    font: 600 12px/18px "Open Sans", sans-serif;

    text-transform: uppercase;

    color: #484848;

    display: block;

    padding: 8px 5px; /* Default 17px 20px*/

    border-bottom: 3px solid #515151; }

  

 

Hope this helps!

Edited September 6, 2014 by nutxlago (see edit history)

[Zeryk]

 

Well, it depends on how many entries you want in the top horizontal menu... there is always a limit.

I think you can edit your-theme/css/modules/blocktopmenu/superfish_modified.css (around line 60) to modify right and left padding for each entry, font-size,etc... My top menu has these rules applied, for example:

 

 .sf-menu > li > a {

    font: 600 12px/18px "Open Sans", sans-serif;

    text-transform: uppercase;

    color: #484848;

    display: block;

    padding: 8px 5px; /* Default 17px 20px*/

    border-bottom: 3px solid #515151; }

  

 

Hope this helps!

 

Thanks for reply!

 

It does work certain way, but not exactly what I need. If I change padding then Yes, it fits into the bar, but then on bigger screen there is  a big gap after the last button. Just black bar. So I thought I could manage fill all top menu which would be evenly shrinking or stretching according the screen as it worked on previous versions PS.

But thanks again!

[nutxlago]

Have you tried to modify the line where sf_menu is involved?

 

.sf-menu {

position: relative;

padding: 0;

width: 100%;

border-bottom: 3px solid #515151;

background: #f1f1f1;

 

You can get rid of that ugly gap at the end. I attach a capture of my actual menu. 

 

 

[Zeryk]

 

Have you tried to modify the line where sf_menu is involved?

 

.sf-menu {

position: relative;

padding: 0;

width: 100%;

border-bottom: 3px solid #515151;

background: #f1f1f1;

 

You can get rid of that ugly gap at the end. I attach a capture of my actual menu. topmenu.jpg

 

never thought about this option. Looks nice on your pic. I ll ry to apply same on my web. and see how it looks.

Thanks.