Merge pull request #1049 from leimao/fix_nav_bar_overflow
Fix the NavBar Overflow Issue when NavBar Items are Too Many
This commit is contained in:
commit
16db86b058
|
@ -9,6 +9,9 @@ $navbar-item-margin-h ?= 0
|
||||||
.navbar-main
|
.navbar-main
|
||||||
box-shadow: $shadow
|
box-shadow: $shadow
|
||||||
|
|
||||||
|
.navbar-container
|
||||||
|
overflow-x: auto
|
||||||
|
|
||||||
.navbar-menu, .navbar-start, .navbar-end
|
.navbar-menu, .navbar-start, .navbar-end
|
||||||
align-items: stretch
|
align-items: stretch
|
||||||
display: flex
|
display: flex
|
||||||
|
@ -51,3 +54,7 @@ $navbar-item-margin-h ?= 0
|
||||||
.navbar-logo
|
.navbar-logo
|
||||||
img
|
img
|
||||||
max-height: $logo-height
|
max-height: $logo-height
|
||||||
|
|
||||||
|
@media screen and (min-width: $desktop)
|
||||||
|
.navbar > .container .navbar-menu, .container > .navbar .navbar-menu
|
||||||
|
margin-right: 0rem
|
||||||
|
|
|
@ -40,7 +40,7 @@ class Navbar extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
return <nav class="navbar navbar-main">
|
return <nav class="navbar navbar-main">
|
||||||
<div class="container">
|
<div class="container navbar-container">
|
||||||
<div class="navbar-brand justify-content-center">
|
<div class="navbar-brand justify-content-center">
|
||||||
<a class="navbar-item navbar-logo" href={siteUrl}>
|
<a class="navbar-item navbar-logo" href={siteUrl}>
|
||||||
{navbarLogo}
|
{navbarLogo}
|
||||||
|
|
Loading…
Reference in New Issue