Hi Andy,

I have really described the problem and the desired solution several times now.
Please see below, where it is described again.

The code that you suggested does unfortunately not work — I’ve currently added it to enfold-child/style.css, and you can see it immediately yourself if you use Firefox’s “Responsive Design View” that is activated with Ctrl+Shift+M (for more details, see https://developer.mozilla.org/en/docs/Tools/Responsive_Design_View ).
The code adds some margin, but that works for a single width only, nothing else. Also, it does not fix item “3.”.

My above suggested solution however, is universal.

Please help!

Best regards,
Carsten

Hi Andy,
thanks for your reply!

Let me re-try explaining the problem and desired solution:

The header meta info (phone info and topmost menu) is fine on both

• desktop (large size screen >= 990px; phone info is left aligned, top menu is right aligned)
• e.g. iPhone (small size screen < 768px; both phone info and menu are centered, stacked above each other)

The problem is the “mid” screen sizes, 768px to 990px, e.g. iPad in portrait mode. In this case, the (left aligned, long long long) phone info overlaps the right aligned menu in a quite ugly fashion. You can see this in the screenshot attached to my very first post above, problem “1)”.

It seems to me that a good solution to this problem would be to have “mid size” screens show the meta info centered and stacked above each other, just like “small size” screens.

(In other words, what Enfold > Header > Mobile Menu > Header Mobile Menu does for the main menu is what I’m looking for for the meta info.)

(I already tried it myself, having a look at layout.css starting at line 3283, but it seems that there are also many other elements that are not related to this portion of the header, so I’m unsure which ones are needed. (All those starting at /*header*/ at line 3309 until /*related images*/ ?))

Best regards,
Carsten

Ok, thanks!

I also had to add something for the phone info, that is:

#header_meta .phone-info
{
    font-size:   13px !important;
    font-weight: normal !important;
}

but everything combined solves the problem!
Thanks!

Hi Dake,

link to the website is in the private data below.
(You don’t need access to the Admin area, do you? Otherwise, please let me know.)

As also said in my other recent request:
I very much appreciate your help, but shouldn’t these issues be addressed in the Enfold theme itself, that is, for everyone?

Best regards,
Carsten

PS: Also as said in my other recent request: I’m aware that Enfold is focused on configuring the via the WordPress Admin area, but wouldn’t it be much easier in cases like this to have a well-documented, user-modifyable LESS or SCSS source file?

Hi Elliott,

thanks for your quick reply, but unfortunately, there is a ton of problems with these settings:

• Main Menu Links has no setting for the font weight!
• Small bar above Main Menu has color settings (font, background, border), but no font size, weight, …
• Side note: Small bar above Main Menu — the color picker for the font color doesn’t work, clicking with the mouse does not update the color at all.
• Both Main Menu Links and Small bar above Main Menu — if a font color is set, the color is the same for all menu items; the distinction between “current page” and other pages is lost.

So the Advanced Styling doesn’t help at all, please help (change the size and weight of the main menu items and the text in the topmost bar).

PS: There is no preview for new forum posts or replies (must submit immediately without preview), and in the Enfold forum, it is quasi impossible to access the forum search…

• This reply was modified 9 years, 3 months ago by CarstenF.

Hi Yigit,

ok, thanks, done! :-)

Best regards,
Carsten

Hi Elliott,

many thanks for your ongoing efforts!

But please consider that the test page is now at a bare minimum: there is nearly no contents in it at all. And even now it loads 425kB of CSS alone.
Also, please let me emphasize again that I do not want to “compress” the CSS (only as a last resort, of course). I’d much rather reduce it in the first place!

Therefore please let me repeat my question:
Is there a way to reduce the size of the CSS and JavaScript files, e.g. by disabling the portions that are not needed?

(For example, it would be great if we could enable and disable “features”, which in turn load or omit the related CSS and JS files.)

Best regards,
Carsten

Hi Elliot,
many thanks for your quick reply! :-)

Please see the link to my test page posted immediately below this post.
With Firebug, I see about 425kB of CSS and another 427kB of JavaScript being loaded here.

The cache plugins will only minify/compress these files, but they won’t remove e.g. the CSS that is unused, won’t they?
For example, we neither use Shop nor BBPress features, so it would seem highly useful to me to not include these portions in the first place, rather than try to compress them?

Best regards,
Carsten