Return to previous page

Full with menu – change column width

This topic has 35 replies, 4 voices, and was last updated 8 years, 10 months ago ago by Jack Richardson

davidturnbull72

Participant

May 28, 2015 at 14:25

Hi,

Are you able to advise what css modifications could be made to increase the width of the columns in the full width menu? I am using this css definition in the main menu item: menu-full-width menu-column3

Some of the menu items are quite long and therefore wrapping – so it would be ideal if the width of the columns could be increased.

Thanks for your help.

#66667 Copied

34 Answers

Robert Hall

Support staff

May 28, 2015 at 14:30

Hello,

Please provide us with link to the page and wp-admin access in Private Content.

Regards,
Robert Hall.

#66670 Copied

davidturnbull72

Participant

May 29, 2015 at 09:30

Thanks Robert – the site is not on a public facing server yet, I’ll drop you a link when it is.

Regards
David

#66907 Copied

Eva Kemp

Support staff

May 29, 2015 at 10:47

Hello,

Ok, we’re looking forward to your reply.

Thank you.
Regards,
Eva Kemp.

#66932 Copied

davidturnbull72

Participant

June 2, 2015 at 10:52

Hi,

OK, site is now in a public area. Details in private area.
I would like the columns of the BRANDS menu to be wider so that the names aren’t wrapping.

Thanks for your help.

Please, contact administrator
for this information.

#67507 Copied
Eva Kemp

Support staff

June 2, 2015 at 11:21
Hello,

Try to add this code in style.css file of your child theme:
```
.menu-column3 .nav-sublist-dropdown ul li:nth-child(3n+1) {
 margin-right: 50px !important;
}
```
How to create custom.css you can watch in this tutorial (it’s for Legenda theme but the process is the same).

Regards,
Eva Kemp.
#67522 Copied
davidturnbull72

Participant

June 2, 2015 at 11:42

Hi – added that CSS to my child-theme CSS – but no different unfortunately.

#67535 Copied

Eva Kemp

Support staff

June 2, 2015 at 12:19

Hello,

I’ve added the code in style.css of the child theme.
Please clear browser cache and check Brands drop down menu http://www.maidens.livingdigitally.co.uk/wordpress/ .

Regards,
Eva Kemp.

#67546 Copied

davidturnbull72

Participant

June 2, 2015 at 18:11

Hi Eva,

Thanks for this. Unfortunately, despite clearing caches and trying different web browsers, I am not seeing any difference in the Brands drop down…. ? Are you able to produce / see a menu in which the columns are wide enough so the long names don’t wrap?

Thanks
David

#67666 Copied

Eva Kemp

Support staff

June 2, 2015 at 20:00

Hello,

Please view the screenshot:
http://storage2.static.itmages.com/i/15/0602/h_1433271447_1620090_ca91dc4031.png
Is columns size not changed?
They were more narrow than they are now.

Regards,
Eva Kemp.

#67681 Copied

davidturnbull72

Participant

June 3, 2015 at 09:11

Hi Eva,

They look the same as my local copy which doesn’t have the changes – see screenshot:

The client would like it so that none of the brand names wrap – there are 3 which are wrapping currently and they are quite long, so the columns need to be quite a bit wider.

Thanks for your help.

#67743 Copied
Eva Kemp

Support staff

June 3, 2015 at 11:00
Hello,

Try to add this code in style.css of your child theme:
```
.menu-column3.with-image .nav-sublist-dropdown {
    width: 900px !important;
}
```
```
.menu-column3.with-image .nav-sublist-dropdown ul > li {
    width: 200px !important;
}
```
Regards,
Eva Kemp.
#67773 Copied
davidturnbull72

Participant

June 4, 2015 at 09:50

Hi Eva,

The good news is that those changes have the desired effect 🙂
The bad news is that putting the .menu-column3.with-image .nav-sublist-dropdown modification in the child style.css file has no effect because it is overridden by the value in responsive.css (see attached image). If I edit the value directly in responsive.css the menu is perfect – but this would then mean that any theme updates would overwrite these changes. Any thoughts on how to overcome that?

Thanks
David

#68040 Copied
Eva Kemp

Support staff

June 4, 2015 at 10:32
Hello,

In this case try to use the code this way:
```
@media only screen and (min-width: 980px) {
.menu-column3.with-image .nav-sublist-dropdown {
  width: 900px !important;
}}
.menu-column3.with-image .nav-sublist-dropdown ul > li {
    width: 200px !important;
}
```
Regards,
Eva Kemp.
#68045 Copied
davidturnbull72

Participant

June 5, 2015 at 09:18

I understand your thinking there Eva, unfortunately that makes no difference either 🙁 Its as thought the responsive.css code is taking precedence.

#68202 Copied
Jack Richardson

Support staff

June 5, 2015 at 10:35
Hello,

I’ve added additional class for Brands menu item in Appearance > Menus and edited the css code in child theme style.css:
```
@media only screen and (min-width: 980px) {
.menu-column3.with-image.custom_drop_down .nav-sublist-dropdown {
  width: 900px !important;
}}
.menu-column3.with-image .nav-sublist-dropdown ul > li {
    width: 200px !important;
}
```
Please clear browser cache and check your site.

Best regards,
Jack Richardson.
#68217 Copied
davidturnbull72

Participant

June 9, 2015 at 14:44

Perfect ! Thank you.

I have another couple of items where the theme doesn’t appear to be behaving correctly – shall I raise them here or would you prefer me to start a new thread?

Many thanks
David

#68866 Copied

Eva Kemp

Support staff

June 9, 2015 at 14:45

Hello,

You can write additional queries in this topic.

Regards,
Eva Kemp.

#68867 Copied

davidturnbull72

Participant

June 10, 2015 at 14:36

Thanks Eva.

When viewing a product – clicking on the tabs beneath the product image (e.g. additional information, reviews etc.) doesn’t work.
e.g. http://www.maidens.livingdigitally.co.uk/wordpress/product/asha-black-low-back-top/

When viewing a product archive (e.g. http://www.maidens.livingdigitally.co.uk/wordpress/product-category/brands/2nd-day/) and the Product Hover Image setting is set to SWAP – nothing happens. The image slider option works perfectly however.

Many thanks for your help.

#69062 Copied

Jack Richardson

Support staff

June 10, 2015 at 18:45

Hello,

Please provide us with FTP credentials (FTP host, FTP user, FTP password) in private content.

Best regards,
Jack Richardson.

#69136 Copied
1 2

Viewing 20 results - 1 through 20 (of 35 total)