Alignment issue in Main Menu categories

[GamerWipes]

see photo. when you click on a category in the main menu header, the sub-categories partially cover the logo. is it possible to move the sub categories over to the right so they dont cover the logo? im using the default theme.

thanks in advanced

[AddWeb Solution]

Hi,

7 hours ago, GamerWipes said:

is it possible to move the sub categories over to the right so they dont cover the logo?

Yes, It is possible. 

• Open Developer Tools

• In the Elements tab, hover over the main menu categories to see the subcategories dropdown. Identify the element responsible for the subcategories menu. This will likely be a ul or div element with a class like .sub-menu.

• In the Styles panel of Developer Tools, add the CSS rules to shift the subcategories to the right.

• For example :

  • margin-left: auto;
    margin-right: 0;
    left: auto;
    right: 0;

     

• Check the page to see if the subcategories have moved to the right and no longer cover the logo.

• Once you confirm the changes work, apply them to your theme's CSS file.

• Save the changes you made to the CSS file.

• Clear the cache in your PrestaShop back office.

• Refresh your website to ensure the changes have taken effect.4

I hope this would help.

Thanks!

[Knowband Plugins]

Hi,

Could you please share the link of your storefront so that we can provide the actual CSS to address your concern.

As you are using the default theme, then the popup might be covering the whole row.
So, shifting the text to right might not work and it might require to shift the popup slightly to the bottom.

Regards.

[GamerWipes]

On 6/21/2024 at 12:46 AM, AddWeb Solution said:

Hi,

Yes, It is possible. 

• Open Developer Tools

• In the Elements tab, hover over the main menu categories to see the subcategories dropdown. Identify the element responsible for the subcategories menu. This will likely be a ul or div element with a class like .sub-menu.

• In the Styles panel of Developer Tools, add the CSS rules to shift the subcategories to the right.

• For example :

  • margin-left: auto;
    margin-right: 0;
    left: auto;
    right: 0;

     

• Check the page to see if the subcategories have moved to the right and no longer cover the logo.

• Once you confirm the changes work, apply them to your theme's CSS file.

• Save the changes you made to the CSS file.

• Clear the cache in your PrestaShop back office.

• Refresh your website to ensure the changes have taken effect.4

I hope this would help.

Thanks!

You lost me at "open developer tools"

[GamerWipes]

On 6/25/2024 at 9:12 AM, Knowband Plugins said:

Hi,

Could you please share the link of your storefront so that we can provide the actual CSS to address your concern.

As you are using the default theme, then the popup might be covering the whole row.
So, shifting the text to right might not work and it might require to shift the popup slightly to the bottom.

Regards.

Hey there, our website is gamerwipes.gg but its currently in maintenance mode. We arent actually launching the site until later in the month. Are you able to see the directories that way? I can edit the .css file i just have no idea which one to edit, or which part.

[GamerWipes]

I have this custom.css file to change the menu from column to row if i want, and change my logo size. Im assuming I add the code to that file? I just dont know what to add or where to go from here. Could someone take what I have and add the code to move the sub menu over? id be happy if the sub menu was aligned center.

#header .header-top>.container>.row:first-of-type {
    flex-direction: row;
}

#header .logo {
    width: 500px;
}

 

[Andrei H]

Hello,

Unfortunately, the site is in maintanence mode and we cannot really see the menu.

As for the file, yes, custom.css is the correct one.

Since it seems like you are using the default theme, you can try and add the following lines of code at the end of the custom.css file:

.top-menu .sub-menu {
    width: 70%;
    min-width: 70%;
    left: 50%;
    transform: translateX(-50%);
}

Now, these are most likely not the values you are looking for, but it is a start.

At this point, you will need to adjust the values in order to make it look good.

Let me know if you have any additional questions 

[GamerWipes]

3 minutes ago, Andrei H said:

Hello,

Unfortunately, the site is in maintanence mode and we cannot really see the menu.

As for the file, yes, custom.css is the correct one.

Since it seems like you are using the default theme, you can try and add the following lines of code at the end of the custom.css file:

.top-menu .sub-menu {
    width: 70%;
    min-width: 70%;
    left: 50%;
    transform: translateX(-50%);
}

Now, these are most likely not the values you are looking for, but it is a start.

At this point, you will need to adjust the values in order to make it look good.

Let me know if you have any additional questions 

Thank you that worked perfectly!