Talk: WikiaNavigationBarStyle

Replacing the logo

Hi, I noticed your note on replacing the global nav logo using JavaScript. You shouldn't need any JS for that - try using these styles (they work for me in Firefox, Chromium, and IE):

.wds-is-wds-company-logo-fandom,
.wds-is-wds-company-logo-powered-by-wikia > g > path:first-child {
    display: none;
}
.wds-global-navigation__logo-image.wds-is-wds-company-logo-powered-by-wikia {
    margin-left: -155px;
    width: 260px;
}

They work by hiding the "Fandom" and "powered by" portions of the usual Fandom SVG logo, then enlarging the remaining "Wikia" portion. - OneTwoThreeFall ^talk 07:54, May 15, 2017 (UTC)

I'll take a look at it when I next get the chance. If I think it does a good job, then I'll add it instead of making an add on JavaScript for it. ― C.Syde (talk | contribs) 23:17, May 15, 2017 (UTC)

Hmm. I was actually thinking of using the two piece logo that came directly before the current one, so instead of saying "Wikia", it would say "Wikia" and "The Home of Fandom". Trying to add it in two images was too much work, so I had to add it as one image, which I have a copy of on my wiki. ― C.Syde (talk | contribs) 03:46, May 17, 2017 (UTC)

Ah, that logo! That can still be added with pure CSS - no images needed (mostly pilfered from Wikia's old SCSS code):

.wds-global-navigation__logo::after {
    content: "The Home of Fandom";
    border-bottom: 1px solid;
    border-top: 1px solid;
    color: #aaa;
    font-size: 10px;
    font-weight: bold;
    line-height: 16px;
    margin-left: 8px;
    text-transform: uppercase;
}

- OneTwoThreeFall ^talk 11:25, May 17, 2017 (UTC)

Woah, that's fantastic. Thanks! :D ― C.Syde (talk | contribs) 23:49, May 17, 2017 (UTC)

You're welcome! - OneTwoThreeFall ^talk 11:53, May 18, 2017 (UTC)

Not sure why but there's an issue with the logo. It seems to have changed since I updated the script, and I don't know how to modify the script to fix the logo. ― C.Syde (talk | contribs) 10:37, May 18, 2017 (UTC)

Wow, I didn't expect the code to become outdated so quickly… Looks like MACH-59330 has already made a fix for the logo - nice work! - OneTwoThreeFall ^talk 11:53, May 18, 2017 (UTC)

Fixing the global navigation bar

Welp. Since the release of the new global navigation bar design, it has caused issues with this CSS. I've managed to fix the worst of it, but it still doesn't look remotely like it did before the recent technical update. Like the search drop-down doesn't look the way it's supposed to. The FANDOM logo is no longer hidden, and the bell and speech bubble icons turn white when you hover over them. The same with the start a wiki button. Also the edit buttons are still wider than they were before the recent update. ― C.Syde (talk | contribs) 01:10, July 14, 2018 (UTC)

I've added a fix for hiding the new global navigation bar logo, but it's not perfect because the "Wikia" and "The Home of Fandom" logos are supposed to be next to each other, not under each other. The search bar is also far from fixed. ― C.Syde (talk | contribs) 03:16, July 14, 2018 (UTC)

Need help with fixing the arrow box of the search bar

Looks like either WikiaCommunityCentralTheme/code.css or WikiaNavigationBarStyle/code.css, probably the latter is causing the search arrow box to become oversized. I've been trying to make a fix for the arrow box, but I haven't had any luck because I don't know what's causing it to become oversized in the first place. So I can't remove the CSS responsible and replace it with a more specific selector. ― C.Syde (talk | contribs) 04:07, July 21, 2018 (UTC)

Yep, WikiaNavigationBarStyle is the culprit. Specifically, have a look at the .wds-global-navigation__search-submit:before styles: you might need to reduce the height to 14px or so and add background-position-y: -7px; to fix the arrow image position. Also, the box-sizing property on .wds-global-navigation.wds-search-is-active .wds-global-navigation__search-submit should be moved to .wds-global-navigation__search-submit to keep button size consistent whether search is active or not. Hope that helps! - OneTwoThreeFall ^talk 08:25, July 21, 2018 (UTC)

I've just tested it myself, however I can't see the entire arrow, so while the position has supposedly improved, it's still not satisfactory as I can't see the whole arrow. ― C.Syde (talk | contribs) 11:04, July 21, 2018 (UTC)

Did you add background-position-y? Arrow will be cut-off without that. - OneTwoThreeFall ^talk 11:14, July 21, 2018 (UTC)

I did indeed. But even that hasn't 100% fixed it. But it isn't too far short of being properly fixed. ― C.Syde (talk | contribs) 11:29, July 21, 2018 (UTC)

Ah, that's because you changed the width too. In that case, use background-position: 7px; (without "-y") so it'll adjust horizontally as well. - OneTwoThreeFall ^talk 11:36, July 21, 2018 (UTC)

All better. Thanks! :D

Glad I could help! - OneTwoThreeFall ^talk 11:44, July 21, 2018 (UTC)

More issues with the navigation bar that are being caused by a recent technical update

Looks like the styling for the navigation bar style is messed up again.

The wikia logo, the Games, Movies, TV, Videos, and Wikis links are now pushed to the left when they should be next to the search box. And the words "Search Fandom Developers Wiki..." should be next to the magnifying glass icon, instead of being pushed to the right. This causes a real issue when searching for pages, as you now often can't see the full names of the pages that are coming up in the search suggestions.

Although the current image displayed on the WikiaNavigationBarStyle page is outdated, as it dates from 2017, it is still relevant with showing what the navigation bar is supposed to look like with the CSS. Seems that the information in this thread has a connection with the damage that has been inflicted on this stylesheet. ― C.Syde (talk | contribs) 03:26, March 12, 2019 (UTC)

I made a small change to fix the search text alignment and to move the logo/links back closer to the centre - hopefully that gives the result you're looking for! I also did a bit of a clean up of old styles that weren't used any more - this shouldn't cause any issues, but feel free to undo if you prefer to keep those styles around for posterity. - OneTwoThreeFall ^talk 11:42, March 18, 2019 (UTC)

I tried putting the coding onto my testing wiki's CSS, which was this:

@import url("/load.phpmode=articles&articles=u:dev:WikiaNavigationBarStyle/code.css&only=styles");

But when I bypassed my cache, nothing happened. Am I doing something wrong? I think I might need a little help installing the code. Master of Memes 21:06, March 19, 2019 (UTC)