[kirk74Participant]

I am using ETHOS, with a slider intro have added custom CSS to do 2 things:

1 – make the horizontal menu go full width 100%
2 – on the homepage / slider page, where the menu is at the bottom, so that the submenus still appear. these go above not below.. all other pages they go below not above.

The custom CSS that I have used to achieve this is below.

I am on a MAC, and this works fine in CHROME and FIREFOX .. but in Safari it is really buggy – there is a huge gap on the menu on the left side, causing the right part of the menu to disappear.. also the submenu popups not working properly.
I knwo that Safari 5 can cause issues with X, but this is Safari 6.1

I have not yet tested it on PC browsers.

Any ideas? Thanks so much,

.home .masthead-stacked .x-navbar .sub-menu {
left: 0;
right: auto;
top: auto;
bottom: 100%;
}

.x-navbar .x-nav>li>a{
letter-spacing:1px;
}

.x-nav {
left: 0;
right: 0;
border: 0;
display:block;
position:fixed;
}

ul#menu-main-menu {
width: 100%;
}

li.menu-item {
width: 16.2825%;
}

.x-navbar .sub-menu a:hover {
text-decoration: none;
color: #00ffff;
background-color:transparent;
}

[ChristopherModerator]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[kirk74Participant]

OOPS! sorry forgot about that.. here it is: http://27.121.66.4/~abab6919/wordpress/

UPDATE to my earlier post, I did some research while waiting and I found that Safari can be buggy with X theme, and this code was recommended for other issues, so I tried it, and it did actually fix it.. but if you could confirm is this the solution you would have suggested?

.masthead *, .x-slider-revolution-container *, .site .entry-featured *{ -webkit-transform: none !important; -webkit-transition: !important; }

One minor thing, notice that the sub-menu text in Safari looks really thin and not as clear as other browsers.. I am guessing just a CSS text-weight setting will fix this

Thx so much.

[Paul RModerator]

Hi,

Thank you for providing the url.

Yes, you can use that code.

As for changing the sub-menu text weight, you can add this under Custom > CSS in the Customizer.

.x-navbar .sub-menu a {
    font-weight: 600;
}

Change 600 to achieve your desired look for the text in your sub menu.

Hope that helps. 🙂

[kirk74Participant]

Just finalising this site now and tidying up the CSS checkign for anything redundant.. and i noticed that this code:

.masthead *, .x-slider-revolution-container *, .site .entry-featured *{ -webkit-transform: none !important; -webkit-transition: !important; }

is no longer in my CSS I must have removed it – yet that Safari bug with the menu spacing is no longer happening.. so maybe this was fixed with the theme upgrade…??

[kirk74Participant]

BUT .. interestingly, the Safari issue with text rendering lighter is still happening..

I have used:

.x-navbar .sub-menu a {
font-weight: 200;
}

and if you look at the site in MAC SAFARI .. the homepage submenu font (when the menu pops up above) is noticeably lighter than on the other pages (when the menu pops down below) ..

It is a really odd bug..it will be distracting for a user to have the menu look so much different on the homepage to the other pages so I really want to fix it.

Thanks.

[Rue NelModerator]

Hello There,

Please correct your custom css in your customizer, Appearance > Customize > Custom > CSS. There are excess } which creates issues of the css not taking effect. Please see this screenshot: http://prntscr.com/7ibdu9

We also compared Chrome and Safari in Mac and this is our test results: http://prntscr.com/7ibenj

Hope this helps.

[kirk74Participant]

Thx for picking up those excesses braces.. I removed them both.. I am afraid it’s still different font weight on SAFARI homepage compared to SAFARI other pages.

Thx also for the screenshot.. but I am not talking about that top level ,ain menu – I am taking about the pop up submenu menu.. on the homepage it pops UP on the other ages it pops DOW .. and in SAFARI – the font weight is different on the homepage in this pop up submenu..

To see this difference clearly, you need to:

Go into MAC Safari – rollover SERVICES to see popup menu.. then click any other page, rollover SERVICES again – you will notice the font weight difference.

Thx

[RadModerator]

Hi there,

It’s common issue with Safari 6.1, which are addressed from the next version of safari. You should update your safari too.

You can search this from google “safari 6.1 font issue”, and you will get ton of result.

I have MAC Yosemite / Safari 8.0 and I’m not getting font issue.

Thanks!

[kirk74Participant]

THX .. I am just hearing so many bad reports about Yosemite.. hence I have stayed with Lion (10.7.5) but you think Yosemite is OK?

[Rue NelModerator]

Hello There,

Yosemite is okay. I was a Lion user also. Most of the time, you need to keep your OS up to date. This ensures that you use the latest browser.

Thank you.

[kirk74Participant]

thank you so much.

[NicoModerator]

You’re most welcome.

Feel free to ask us again in a new thread if its not related to this topic 🙂

Have a great day! 🙂

[Author]

Posts