We offer professional Design/Code Customisation and Website Optimisation Service Request Customisation
  • Status: Closed
  • Closed by: Marek (marek)
  • Closed on: 05.02.18, 16:11
  • Reason: Closed
  • Comment: Glad to help!

Ticket #11355 - No menu showing

Unable to get the menu to show not he desktop version. Using header 3 it does not show at all, and using header 4 it is hidden behind the actual header and you can only see approx 2pixels of the bottom of it.

This ticket does not depend on any other tickets.

Marek (marek) 03 Jan 2018, 11:32

Hi, Angela.
Please fill out all necessary fields in your profile https://support.promokit.eu/index.php?do=myprofile to access to your back office

Angela (paradigmit) 03 Jan 2018, 15:35

There is no save option and as such it just returns to the fields being blank after I complete them. Can you advise?

Marek (marek) 03 Jan 2018, 15:38
Angela (paradigmit) 03 Jan 2018, 15:47

Thanks for the screenshot. Your support forum does not appear to be safari compatible. Save button shows when using Chrome but not when using Safari.

Profile updated.

Marek (marek) 03 Jan 2018, 15:48

I'm always using Safari, and there are no any issues

Marek (marek) 03 Jan 2018, 15:52

I'm not able to login

Angela (paradigmit) 03 Jan 2018, 15:55

Can you try again now please.

Marek (marek) 03 Jan 2018, 16:03

Now it works. I see the issue and working to fix that

Angela (paradigmit) 03 Jan 2018, 16:05

Sorry but you say now it works but there is still no menu showing?

Marek (marek) 03 Jan 2018, 16:20

Sorry for my English. I meant I'm able to login now

Marek (marek) 03 Jan 2018, 16:42

I have installed new menu module which will be available in the next theme update. Please check it out

Angela (paradigmit) 03 Jan 2018, 17:05

Hi thanks, can see that but how do we now customise it in respect of font and colours etc and those options no longer work through the theme settings.

Marek (marek) 03 Jan 2018, 17:07

I'll make it compatible soon and update it. Hope to finish tomorrow.

Marek (marek) 04 Jan 2018, 20:59

I have a fix, and I need access to your server to implement it

Angela (paradigmit) 04 Jan 2018, 23:10

Hi Marek,

I'm Angela's business partner and I manage our server. I would not generally allow access to our server to anyone bar company employees because of the security of our customer data - can you detail the fix for me and I can make the changes required?

Many thanks,

Mark, ParadigmIT Ltd.

Marek (marek) 05 Jan 2018, 12:18

Of course, I understand.
Here is fixed file (unzip it first) (see attachment)
Put it to the /ROOT/modules/pk_themesettings/inc/

config.php.zip (4.4 KiB)
Angela (paradigmit) 05 Jan 2018, 16:29

Hi Marek,

I've replaced the config.php in /ROOT/modules/pk_themesettings/inc but it still appears that we cannot change any settings for font/size colour etc. as Ange already indicated. Also, new menu is pk_menu whereas inside theme settings module, it still shows flex_menu settings - is this correct?

See screenshot..

Thanks,

Mark.

Screen Shot 2018-01-05 at 15.... (182.8 KiB)
Marek (marek) 06 Jan 2018, 11:57

I just changed menu configuration and all works fine http://ladycrowscotland.paradigmit.co.uk/en/

Angela (paradigmit) 08 Jan 2018, 10:19

Hi thanks for your help with this. There still appear to be some issues:

1. the menu does not appear formatted correctly using Header 3. It overlaps the slider at the top
2. the menu does not let you simply link to the categories from it. For example I would like to simply see categories 18 to 26 listed on the menu (plus a Home item)
3. Some of the category names are not being pulled through as they are shown in the categories
4. the menu is incorrectly formatted on the mobile version. it simply shows the 3 lines in a box on the left and then a long black shaded box fills most of the rest of the line. Rather than simply the 3 lines and the word Menu centered on the page.

Can you advise?

Thanks.

Marek (marek) 08 Jan 2018, 12:37

Yes, I see now.
1. here is the solution http://media.promokit.eu/screenshots/monosnap/scr_20180108_115719.png

2. I don't see any problem to add your categories, just click "+" button http://media.promokit.eu/screenshots/monosnap/scr_20180108_121203.png

3. Could you please take a screenshot of the issue?
4. Here is the fix, put this code to the "Custom CSS" in the "Theme settings" module:

body #pk_top_menu .top-menu {
  background:#01002c;
  margin-top:34px;
}
#pk_top_menu .pk-sub-menu:not(.in) {display:none}
#pk_top_menu .icon_menu {margin:0 auto;justify-content: center;}
#pk_top_menu .icon_menu > svg {margin-top:5px}
Angela (paradigmit) 08 Jan 2018, 12:45

Hi,

can you confirm what file should be amended as per your solution for item 1?

At present the fixes for the menu and header 3 still do not leave a gap between the menu and the banner images but once I have adjusted for your solution for item 1 I'll send a screenshot if they re still occurring.

Thanks.

Marek (marek) 08 Jan 2018, 12:48

Sorry, I missed that.
The file is /modules/pk_themesettings/inc/config.php

Angela (paradigmit) 08 Jan 2018, 13:01

Thanks. config.php already refers to top-menu rather than pk_top_menu

When using Header 4 it still shows the menu but keeps the gap between it and the banner, but it is Header 3 that removes the gap.

See attached images as per mobile and desktop views.

Alysum-Mobile-Header3 and men... (2.38 MiB)
Alysum-Desktop-Header3 and me... (602.1 KiB)
Marek (marek) 08 Jan 2018, 13:30

here is one more CSS fix:

#pk_top_menu .top-menu {
width: 100%;
margin: 0 auto;
text-align: left;
}

Do you want to keep the gap or remove it?

Angela (paradigmit) 08 Jan 2018, 13:33

Hi thanks. Want to keep a gap, so there is white space between the bottom of the menu and the top of the banner.

Marek (marek) 08 Jan 2018, 13:48

ok, it's easy.

#header {margin-bottom: 20px}
Angela (paradigmit) 08 Jan 2018, 14:57

Thats great thanks.

Going back to the menu you will see that I have the categories all listed, but items 3, 4 and 5 do not reflect the category names:

Textured Silk showing as Textured Silk Scarves
Textured Silk Scarf with Ring showing as Scarf
Gossamer Silk showing as Silk Scarfs

Angela (paradigmit) 08 Jan 2018, 16:35

Hi, not sure if the issue is related to a similar one I have where it is not updating names someone?

For instance, The categories above had previously been named the name they are now showing.

Also, I created an attribute called Large Scarf and then changed that to Scarf Size and the wording large Scarf is still showing on the product page. Even though I added the attribute to the product after I had amended the wording.

Can you advise?

Angela (paradigmit) 09 Jan 2018, 11:18

Hi, also the new menu module that you have installed not responsive.

It works on a 1920 x 1080 resolution and a mobile, but does not work on lower resolutions or tablets.

It needs to be fully responsive as the old one was. Can you advise?

Thanks.

Angela (paradigmit) 09 Jan 2018, 14:43

Hi, also the new menu module that you have installed not responsive.

It works on a 1920 x 1080 resolution and a mobile, but does not work on lower resolutions or tablets.

It needs to be fully responsive as the old one was. Can you advise?

Thanks.

Angela (paradigmit) 09 Jan 2018, 15:23

Can you please advise on the outstanding issues?

Marek (marek) 09 Jan 2018, 21:54

Sorry for the delay.
I'll try to prepare a fix for you tomorrow.

Marek (marek) 10 Jan 2018, 11:44

Could you please take a screenshot of the issue, I need exactly know what to fix

Angela (paradigmit) 11 Jan 2018, 21:20

Hi,

see attached screenshots.

When you reduce the screen size down, either 1600 resolution, or even to a tablet, then the menu is not responsive and cuts off on the right hand side.

There appears to be no right hand padding.

Menu-Mid1.png (567 KiB)
Menu-Mid.png (390 KiB)
Menu-small.png (301.4 KiB)
Menu Full Width.png (744.4 KiB)
Marek (marek) 12 Jan 2018, 11:48

you have huge menu items, and the best way is to optimise it. I have tried to make something, but it's a little bit complicated

Angela (paradigmit) 13 Jan 2018, 12:13

Hi,

thanks but just because it uses a smaller font in the menu does not make it responsive.

The new menu module you have put in to replace the original one is not fully responsive.

Setting the font size to 12px just makes it appear responsive on a tablet. Also, the menu itself is not even entered on the page so looks out of alignment with the page due to the CSS being added.

What amendments did you originally make in order to force it to use your new menu module?

Marek (marek) 13 Jan 2018, 12:18

It doesn't matter what menu module you are using. Your menu items are huge and there are to much items. The best way is to optimise your menu

Angela (paradigmit) 13 Jan 2018, 12:27

Hi,

thanks for I disagree. Even with less items on the menu we still have the same issue. The menu is not fully responsive.

It is also now no longer formatted properly on the page as on a tablet it fits with the 12px font size (which looks fine on a table but is too small when looking at it on a desktop) but is is aligned to the left on the page and therefore off centre for the whole page.

When testing the same menu on a standard 1.7 Prestashop installation the menu is fully responsive and works properly.

Marek (marek) 13 Jan 2018, 12:31

Here is the screenshot with your menu in the default prestashop theme. Do you want the same behaviour?

Angela (paradigmit) 13 Jan 2018, 12:38

Hi Marek,

thanks for the screenshot.

What I'm expecting a responsive menu to do is one of 2 things:

- at its standard settings then if the menu is too wide it goes over 2 lines as shown in your image above, or
- it adjusts the text size down in size to allow it to continue to fit on the screen

With the first option above then the user has the choice to adjust the menu items or to use css to adjust the font size

This is what I'd consider the usual practice.

Have never had the issue we now have where the menu is simply cut off.

Thanks for your help with this.

Marek (marek) 13 Jan 2018, 12:41

ok, the fix is easy:

body .top-menu {
white-space: wrap;
}
Angela (paradigmit) 13 Jan 2018, 14:01

Hi Marek,

That code above seems to do nothing I'm afraid. What we would like is for the menu to respond in 2 ways:

1. Like the menu on the House of Bruar website (http://www.houseofbruar.com/)

2. Have the ability to split the menu when resizing the page so that it keeps it's readability over 2 lines - at the moment it doesn't do that even with your code in the last message - see the screenshot attached.

many thanks!

Screen Shot 2018-01-13 at 12.... (416.8 KiB)
Marek (marek) 14 Jan 2018, 11:29

I just make it work over 2 line

Loading...