Top horizontal menu doesnt fit screen

[yavanna]

Any ideas, how to fit top horizontal menu items in one row? I have 9 categories and in my computer they are in one row, but I discovered that in smaller screens there are two rows and its not visually very nice.

 

e.g some code, that makes this menu fit screen or smth?

 

Thanks! 

[vekia]

full width header + top horizontal menu: http://www.prestashop.com/forums/topic/2602[spam-filter]solved-full-width-header-and-top-horizontal-menu/

[yavanna]

Thanks!

 

Somehow I can't find grid_9 value and also place where to change top horizontal menu width.

 

My header <div> from header.tpl file looks like this:

 

<!-- Header -->

<header id="header">

<a id="logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">

<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />

</a>

{$HOOK_TOP}

</header>

 

instead of what I saw from thread here:

 

remove the header <div> from the <div id="page">



then remove grid_9 value


after that it will be neessary to change also width of the top horizontal menu (CSS styles) just change the width:980px; to width:100%;

 

[vekia]

it looks like you use nondefault theme, so i don't know how to hlep in this case, mainly because i don't know what theme you use, how it looks and also how it source looks like.

 

url will be helpful

[yavanna]

Hi, thanks for trying to help:)

I use 01Premium theme

url is http://quieroeso.es

[vekia]

hello

 

i checked it, your theme is "responsive"

 

please remove max-width param from:

#header {
max-width: 1200px;
margin: 0 auto 10px;
position: relative;
min-height: 180px;
z-index: 200;
}

[yavanna]

It didnt work:S

Removed it, changed it, but nothing. (global.css file)

[vekia]

it's probably because you use responsie theme and it display different website version depending on screen resolution

[yavanna]

It means this problem can't be solved? :S

[vekia]

no, it mean that width depends on browser screen because you use responsiveness. it is possible to achieve what you want, but it will be a bit hard

may i know what screen resolution you use?

[yavanna]

Ok, some light at the end of the tunnel

 

1366x768. But in my computer it looks nice (unless I minimize the window)

[vekia]

take a look:

 

1366x768 - full width:

 

 

 

but when you change resolution it isnt:

 

 

 

responsiveness is based on media queries, in this case you will have to edit also these styles

@media only screen and (max-width: 1320px)
#header, #content, #footer {
max-width: 1000px;
}

+

@media only screen and (max-width: 1320px)
#header, #content, #footer {
max-width: 1000px;
}

+

@media only screen and (max-width: 1020px)
#header, #content, #footer {
max-width: 800px;
}

[yavanna]

I tried putting max-width "none"  "100%" "auto" and "5000px", but it didnt help. Am I doing something wrong?

[vekia]

for example, instead of max-width: 800px;  use width:100%!important;

 

btw. you have to remove this:

@media only screen and (max-width: 1020px)

#header, #content, #footer {
max-width: 800px;
}

 

not this:

@media only screen and (max-width: 1020px)

[yavanna]

All three look like this now:

 

@media only screen and (max-width: 1320px) {

  #header, #content, #footer {
    width:100%!important;

 

but still no change

[vekia]

i've got 100% width no matter what resolution i use

[yavanna]

1024x768 has 2 rows

[vekia]

now i don't know what you want to achieve. You said that you want 100% width, after changing code your header has got 100% width no matter what resultion you will use.

 

two rows in menu - everything depends on your theme

there is not enough space for menu items, so you see 2 rows

[yavanna]

Well, what I am hoping to achieve, is someting like prestashop backoffice looks like - no matter how small screen or window, top horizontal menu always stays in one row.

[yavanna]

Any ideas?

[vekia]

Well, what I am hoping to achieve, is someting like prestashop backoffice looks like - no matter how small screen or window, top horizontal menu always stays in one row.

 

back office isn't responsive - so while you changing width / screen - it always dispaly the same layout.

with responsive theme, your page changing layout while you use different screens. 

your theme hasn't got responsive menu, it's a bit more complicated that simple full width header

it mean that you should change menu because it isn't responsive... effect that you want to achieve isn't as easy to create as it seems.

[yavanna]

Is there any module I could buy or some other option? Changing the font size wouldnt be very helpful either? % or vw or something like that?

[vekia]

in this case you will have to add some modifications to css files, like here: http://goo.gl/6dHT3W - check how the menu works (change screen size) - You need the same effect on your website, mainly because small font will be unreadable on small screens. (on pc also!)

[yavanna]

Anyone willing to help me with this, e.g. for some pay?

[vekia]

hello

 

so if you click on edit button you don't see anythig?

even if you scroll page down? maybe there is an "edit" form

can you verify it please?

[dformica]

Did you resolve this?

I'm trying the same thing,to keep the top navigation on one row.  As soon as the screen becomes smaller than 1190px, it cuts into two rows so my website looks bad on all tablets.  I would like to either add a (+) at the end where no more space is available to display categories or just display the mobile version of the navigation.  I'm on PS 1.6