Skip to content

Misaligned logo in header #579

@gmeben

Description

@gmeben

Area of Site: Profiles
URL: https://profile.hcommons-test.org/

Description
The main logo is misaligned with the navigation menu on the left. It has media query breakpoints that further complicate this.

Solution
A complete fix would probably require refactoring the layout scaffolding nesting this logo, but a relatively simple and effective improvement to have the logo more closely associated with the navigation elements and prevent the current stuttering between breakpoints would be to change the following styles in static/css/profile.css:

/* line 821 */
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}
/* line 853 */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

which looks like this

Screenshot showing the logo about 100px out of alignment with the navigation elements

to this:

@media (min-width: 992px) {
    .container {
        max-width: 93vw;
    }
}
@media (min-width: 1200px) {
    .container {
        max-width: 93vw;
    }
}
Screenshot showing the logo in alignment with the navigation elements after applying the suggested styles

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingux

    Type

    No fields configured for Bug.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions