stylesheets/mat_nav_fix_overlap.css at main · openlibhums/stylesheets · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
/*

On Material, there can be an issue at some logo and menu sizes where
the logo will overlap the menu at some screenwidths.

Placing this css in the custom.css of the individual journal
may fix that issue.

The numerical values may need to be adjusted to the individual journal.
Note, css variables cannot be used within the @media selectors.
e.g. use  @media only screen and (min-width: 993px)
NOT @media only screen and (min-width: var(--nav_min_width)) {

/*

/* navbar overrides */
:root {
  --nav-height-px: 120px;
  --nav-border-style: 4px solid;
}

@media only screen and (min-width: 993px) {
  .header-overrides {
    height: var(--nav-height-px);
  }

  .dropdown-content {
    top: var(--nav-height-px) !important;
  }

  .header-overrides ul.hide-on-med-and-down a:not(.dropdown-item) {
    height: var(--nav-height-px);
    padding: calc(var(--nav-height-px) - 75px) 10px 0px;
  }

  nav ul:not(.dropdown-content) a {
    border-bottom: var(--nav-border-style) transparent;
  }

  nav ul:not(.dropdown-content) a:hover {
    border-bottom: var(--nav-border-style) var(--accent-color);
  }

  #logo-container {
    top: 50%;
    display: flex;
    transform: translateY(-50%);
  }

  @media only screen and (min-width: 993px) and (max-width: 1330px) {
    :root {
        --nav-height-px: 160px;
    }
    #logo-container {
      top: 40%;
      display: flex;
      transform: translateY(-50%);
    }
  }
}