Skip Navigation

[Resolved] Layouts is adding unwanted CSS to menus

This support ticket is created 7 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- - 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00
- - - - - - -

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

This topic contains 16 replies, has 2 voices.

Last updated by Beda 7 years, 9 months ago.

Assisted by: Beda.

Author
Posts
#460569

I am working with the Toolset Starter Theme and I'm having a lot of problems styling menus.

I switched off the Theme CSS because I want to build my site on the top of core Bootstrap CSS.

Then I started finding problems with my menus e.g.

The default Bootstrap .nabar-toggle class should float the menu button to the right hand side of the menu bar. But I found it was floating to the left hand side.

So then I discovered a whole bunch of CSS starting with the prefix .ddl

So in this case the CSS .ddl-nav-wrap was overriding the core Bootstrap CSS.

Then I found another post about this at https://toolset.com/forums/topic/layouts-css-overrides-theme-css-for-menu/

So I have spent hours trying to over-write menu CSS which shouldn't be there in the first place (I switched OFF the Starter Theme CSS).

Can you please explain

1. Why this CSS is 'live' when I switched OFF the Starter Theme CSS?

2. How I can switch it OFF?

3. Is there any other CSS (other than core Bootstrap) that is hiding in the Theme?

Regards

Robert

#460795

Bootstrap has a few issues we needed to fix, specially for level 3 and up nested dropdown menus, when it comes to Mobile Sizes.

You can not switch it off, if you use the layout menu cell, it will be used.
You can overwrite it if you want, but I do not suggest this.

The theme itself has also a normal style.css file, just like any other WordPress theme.
You can also overwrite this by creating (actually, using) the Child theme we offer on the Download area of your Toolset account.

Please let me know if I can help with a specific issue on a specific site?

#460861

Hi Beda
Thanks for getting back so quickly.

I thought the CSS might be been applied via the Layouts Menu Cell so I created a bootstrap menu from scratch using a Toolset Content Template as the code holder and then calling up the template within a Layouts Cell.

You can see that menu at hidden link

I still appear to be getting Toolset Starter Theme CSS in that menu. If you browse the link above and minimise the menu bar then you will see that the default Bootstrap .nabar-toggle class which should float the menu button to the right hand side of the menu bar is being overridden by a CSS code line

.ddl-nav-wrap, .navbar-toggle, body .ddl-navbar-toggle {
    float: left;
}

So I just want to find a way to work solely from core Bootstrap CSS and be 100% sure that no Theme CSS is being applied to my menus?

It would also be useful to know what version of Bootstrap CSS is loaded with the Starter Theme. I can see references to boostrap.min.css:5 which I don't understand. Current Bootstrap CSS is V3.3.7

Hope you can clear up these points so I can gain certainty about my menu CSS.

Regards

Robert

#461031

If you do not want to use Theme CSS you can use a Child Theme and enqueue your own style sheet.

That Style is not from Layouts as far I see but from the Starter Theme, in the file header-layouts.php

You can use a Child theme to avoid this, or edit your own CSS and overwrite this.

I will inform the Developer and ask why this has been added.

#461032

You can also disable Menu CSS in Appearance > Customize > Menus:
WooCommerce Endpoints
Show advanced menu properties
Link Target
Title Attribute
CSS Classes
Link Relationship (XFN)
Description

In the advanced settings you can even disable all Theme CSS.

#461419
image-1.jpg
image-2.jpg

Hi Beda

I've uploaded images showing how I have configured the custom theme settings. You can see that the Load Theme CSS is switched off but I am still getting Theme CSS affecting my Bootstrap Menu.

If a Child Theme is the solution then let me know what code to add in the child theme and I will do it.

Regards

Robert

#461545

The code is in header-layouts.php and therefore it's so-called "inline CSS".

If you use the Child Theme you can customize the header-layotus.php and remove that inline CSS.

The Child theme is available in the Download area of your Toolset account and is the recommended way of using a customised theme.

#462050
Image-1.jpg
Image-2.jpg

Hi Beda

I downloaded the Toolset Starter Child theme and as a first step copied over header-layouts.php file from the main theme into the child theme directory. However when I changeover from the main theme to the child theme, the home page layout is quite different.

Image 1 shows the main theme home page layout
Image 2 shows the child theme home page layout

I did some further investigation and found out that the child theme is re-ordering the content of the Layouts widget cells.

As one example;

In the main theme I created a Layouts widget cell and inserted the search widget into that cell.

In the child theme, this same Layouts widget cell has been reallocated to one of the 'Linkable Title Html and Php' widgets (used to display adverts).

So all the Layouts widget content has been reallocated; hence the different layout.

This looks like a Layouts bug, so before I start modifying the child theme, I need you to check this out please and let me know how to fix.

You still have admin access to my site via my other support thread at https://toolset.com/forums/topic/need-help-with-slider/

You will be able to see the issue easily by switching between the main and child themes.

Regards

Robert

#462251

The Toolset Child Theme does not change any layout or style if you simply download and activate it.

I do bot know what changes the look of your site when you switch themes, but i rather suspect one of the several Updates pending is the issue, or code added somewhere.

Child Themes do not change the look, if nothing is modified in them.

Once you downloaded and updated all themes, and used a Fresh Child Theme, test it out.
Nothing will change. I tried this locally just to ensure this (although it's expected).

Can you ensure you use clean, fresh and updated Software?
Si see over 20 updates on the site, and also the theme is involved in them.

Please let me know once those are fullfilled.

#464161

Hi Beda

I removed every non essential plug-in from my site and everything is updated.

I removed all widget cells from my home page layout and started again.

I created one Layouts widget cell called 'Layouts Search' and put the standard WordPress Search widget into that widget cell.

You will see that the widget appears correctly when using the Toolset Starter Theme but does not display when you switch to the Toolset Starter Child Theme.

You will also see that the Search Widget has disappeared from the Layouts Widget Cell.

I have spent several hours testing this issue this over and over again and the problem is repeatable.

I would be grateful if you would repeat my test and then advise next steps.

Kind regards

Robert

#464279

When you activate a Child theme nothing changes.
I tested this (again) locally, and this is how Child Themes work.

As long it's not modified, nothing changes.

Your Site still presents outdated Software, the Starter Theme as for example.

I see on your site the Search Widget is gone when the Child is active, this does not happen on my local tests, and it should not happen due to a switch to a unmodified Child Theme.

Please delete your Themes (both), download them from the download area and then upload them by FTP to your Server.

If then the issue persists I will need to make some tests on a copy of your website.

#465160

Hi Beda

I deleted both Starter and Child themes from my site.
I downloaded latest versions of both themes to my PC
I unzipped both themes and then uploaded to my Server using FileZilla
The problem remains as before.

Regards

Robert

#465287

I see now the issue here, this is a Widget Area, not a Single Widget, I tried with the wrong one.

The Widget Area is not displayed on the Toolset Starter Child Theme.

For now you can use the Single Widget Cell.

I am investigating this and informing the Developers.

#465339

When changing themes, there is often some variation in the number and setup of widget areas/sidebars and sometimes these conflicts make the transition a bit less smooth.

If you changed themes and seem to be missing widgets, scroll down on the screen to the Inactive Widgets area, where all of your widgets and their settings will have been saved.

This is what WordPress states on this matter:
https://codex.wordpress.org/WordPress_Widgets

And it helps, as you can simply head to the Widgets Area on your WP admin and re-add the widgets to the area (they are now in the inactive zone), after you switch to your Child Theme.

I am discussing with the Layouts Developer if this might have some room for improvement as we basically switch a Theme with the same areas - given that it supports Layouts.

Please await my updates in regard here

#465558

Hi Beda

I have changed to using single widget and the problem is solved.

Please tell your developers that the problem with the widget areas is not just a case of widget area to widgets allocations being lost. Widgets are actually being reallocated to different widget areas hence the change of appearance I explained in my previous post.

As many site developers will be using the Starter Child Theme, it is worth trying to get this issue resolved.

I also not that some of the Toolset Starter Theme Menu CSS has been revised in the latest release. It is now much closer to the core Bootstrap CSS. My request would be to remove all Toolset CSS (including menu CSS) when the option box is unticked. This would solve the problem entirely.

Regards

Robert

This ticket is now closed. If you're a Toolset client and need related help, please open a new support ticket.