I’m using the Twenty Fourteen theme on my website and I’ve noticed that there is a problematic behavior in the Safari browser. More specifically, it is the header bar, specifically the main menu (selector “#primary-menu”) when it is filled with content. The menu doesn’t seem to be in the right position and floats down instead.

Interestingly, this problem only occurs in the Safari browser, while in other browsers everything works as expected. After researching, I found out that this behavior does not only occur on my website, but also on other websites that use the Twenty Fourteen theme.

I have already tried to solve the problem by making CSS adjustments, but so far without success. In doing so, I noticed that Safari seems to ignore the selector. Therefore, I suspect that it might be a specific rendering behavior of Safari.

My questions are:

1. Are you aware of this issue with other users of the Twenty Fourteen theme in the Safari browser?
2. Are there any specific CSS adjustments or recommendations to fix this behavior in the Safari browser?
3. Is it actually a problem in the themes, or could it possibly be Safari itself?

I would be grateful if you could help me fix this issue and ensure that the Twenty Fourteen theme works properly in the Safari browser.

Thank you very much in advance for your help.

With kind regards

i’m trying to change the header color from black to teal on all of the pages of this site, but was only able to change it for the homepage so far.

thx — any ideas are highly appreciated!
n

*using the free inspiro theme
*here’s the homepage: https://tucsonyogacollective.com
*here’s one of the other pages: https://tucsonyogacollective.com/leah-stauber

**and here’s the CSS I used on the homepage:

/* Header bar at the top */
.navbar {
    background: #52B1A9;
}

/* Header bar when scrolling */
@media screen and (min-width: 48em)
.headroom--not-top .navbar {
    background: #52B1A9;
}

/* Header bar on he homepage */
@media screen and (min-width: 48em) {

    .has-header-image.home.blog .headroom--not-top .navbar, .has-header-image.inspiro-front-page .headroom--not-top .navbar, .has-header-video.home.blog .headroom--not-top .navbar, .has-header-video.inspiro-front-page .headroom--not-top .navbar {
        background: #52B1A9;
    }

https://4wellbeeing.com/the-bees-our-products

I’d like to either remove the white background of the header bar where my Primary/Main menu is situated, or completely remove the bar and replace it with a header top bar as in all the other pages.

Please advise. Thank you in advance.

The overall UI experience is very well made and adds a new, more professional “feeling”. Using the JS way of thinking, the UX is more responsive in user actions.

Although, in my opinion this “sticky” notification header needs some UX work. Let me explain with some keypoints:

– It takes a lot of usable viewport height.
– In mobile view is just a breadcrumb that is useless.
– It doesn’t fit well with the “Screen Options” tabs.
– The “sticky box shadow” adds even more confusion in the eye.

I would definitely like to see this re-designed or at least to drop the “sticky” feature — this should enable more design options.

When it comes to reports — while the feature is much-needed, lookup tables can’t hide the elephant in the room.

No doubt — lookup tables can improve performance when done right. However, such tables are typically synced using more advanced MySQL strategies, like stored procedures. The way they are done in WooCommerce seems to add a lot of technical debt.

Before adding advanced Analytics features into WooCommerce, it might have been a good idea to tackle the root of the problem by moving data out of the posts/meta tables to make faster Reporting queries possible.

PS: Kudos for all the work you are doing!

When I change menu colors/typography, it only works in the nav menu is in the site header, not the header bar; if I customize color of text in the header bar, it only changes the social media icons, not the nave menu links.

Thanks in advance for any help,

DH