Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Prevent last nav menu from overflowing #1727

Draft
wants to merge 2 commits into
base: src
Choose a base branch
from
Draft

fix: Prevent last nav menu from overflowing #1727

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
00d3fee
fix: Prevent overflowing last menu dropdown
oliviergoulet5 Sep 29, 2023
d5da00e
fix: Remove bad file
oliviergoulet5 Sep 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 28 additions & 1 deletion less/components/menu.less → less/layout/_navbar.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,17 @@
/*!
* Copyright (c) 2019, 2023 Eclipse Foundation, Inc.
*
* This program and the accompanying materials are made available under the
* terms of the Eclipse Public License v. 2.0 which is available at
* http://www.eclipse.org/legal/epl-2.0.
*
* Contributors:
* Eric Poirier <[email protected]>
* Olivier Goulet <[email protected]>
*
* SPDX-License-Identifier: EPL-2.0
*/

.toolbar-container-wrapper{
background-size: cover;
}
Expand Down Expand Up @@ -213,6 +227,18 @@
}
}

// Prevent menu from overflowing on the right side of the screen. The reason we
// are selecting the 2nd last child is because the last child is a mobile-only
// menu item.
#main-menu .navbar-nav li.dropdown:nth-last-child(2) {
Copy link
Member Author

@oliviergoulet5 oliviergoulet5 Sep 29, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It might seem a bit hacky. I wanted to add a custom parameter to the menu item in menu.toml. Something like class or direction. However, Hugo doesn't allow params on menu items, only menus.

I also tried doing :last-of-type, but that selector only works with elements, not classes. That would've been perfect if it worked because I would select the last .dropdown.

Bootstrap introduced responsive menu direction classes in v4. When we migrate to v5, we could have a better solution using that.

position: relative;

& > .dropdown-menu {
left: -100%;
right: auto;
}
}

.gsc-search-button-v2 {
border: 1px solid @white !important;
border-radius: 0px !important;
Expand All @@ -230,4 +256,5 @@
line-height: 14px !important;
position: relative;
top: 3px;
}
}

5 changes: 3 additions & 2 deletions less/styles.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
* Copyright (c) 2019 Eclipse Foundation, Inc.
* Copyright (c) 2019, 2023 Eclipse Foundation, Inc.
*
* This program and the accompanying materials are made available under the
* terms of the Eclipse Public License v. 2.0 which is available at
Expand All @@ -16,9 +16,9 @@

@import 'vendors/_syntax.less';
@import '_variables.less';

@import 'components/tabs.less';
@import 'components/_commons.less';
@import 'components/menu.less';
@import 'components/jumbotron.less';
@import 'components/home.less';
@import 'components/panels.less';
Expand All @@ -29,6 +29,7 @@
@import 'components/_eclipsefdn-meeting-minutes.less';

@import 'layout/_header.less';
@import 'layout/_navbar.less';

@import 'transient.less';
@import 'release-8.less';
Expand Down