iynqueiynqueRecent blog postsTop ContentAll PagesMost PopularNewly ChangedIynque WikiMain PageA mainspace articleTop CategoriesBlog postsIynque/Pages with perceived errors on a new wikiVideosPlaying with BalldroppingsCommunityPortal👥 Community PortalForumContactTop Users👑 AdminsMaintenanceToolsWiki StatsAll PagesAll CategoriesCategory TreeAll Special PagesHelp
1 Post
Avatar
All Contributors
No replies yet.

Improving header/navigation length

Right now, the header and navigation are too short for wide screens, and too long for small ones. I wanted to contribute to your gorgeous wiki, so I wrote some CSS that'll fix those problems. I hope you don't mind!

You'll need to replace this code:

#WikiHeader::before {
    content: "";
    background-color: #333;
    display: block;
    width: 200%;
    position: absolute;
    height: 110px;
    z-index: -1;
    right: -170px;
    top: 0
}
 
/* ... */
 
div.navbackground::after {
    content: "hello";
    background-color: #69f;
    display: block;
    width: 100;
    position: absolute;
    height: 26px;
    z-index: -1;
    top: 0;
    right: -165px;
    bottom: 0;
    padding-bottom: 4px;
    float: left;
    border-top: 2px groove rgba(255, 255, 255, 0.35);
}

With this:

#WikiHeader::before {
    background-color: #333;
    bottom: 0;
    content: "";
    left: calc(50% - 50vw);
    position: absolute;
    top: 0;
    width: 100vw;
    z-index: -1;
}
 
@media screen and (max-width: 1030px) {
    .WikiaPageContentWrapper,
    #WikiHeader::before {
        padding-top: 0;
    };
}
 
/* ... */
 
div.navbackground::after {
    background-color: #69f;
    border-top: 2px groove rgba(255, 255, 255, 0.35);
    bottom: 0;
    content: "";
    left: 100%;
    position: absolute;
    top: 0;
}
 
@media screen and (max-width: 1370px) {
    div.navbackground::after {
        width: calc((100vw - 1038px) / 2);
    };
}
 
@media screen and (min-width: 1370px) {
    div.navbackground::after {
        right: -165px;
    };
}
 
@media screen and (min-width: 1940px) {
    div.navbackground::after {
        width: calc((100vw - 1608px) / 2);
    };
}

I'm not exactly a master of CSS, and this endeavor took me a few hours, so I really hope it works for other people!

0 0
  • Upvote
  • Reply
No replies yet. Be the first!
Write a reply...