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.

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

How to align navigation bar to page content? #512

Open
nntesla892 opened this issue Jan 15, 2021 · 6 comments
Open

How to align navigation bar to page content? #512

nntesla892 opened this issue Jan 15, 2021 · 6 comments
Labels
documentation Changes to documentation only (e.g., README, Guide, Wiki Pages, etc.)
Milestone

Comments

@nntesla892
Copy link

I have removed the profile stuff on the side and just want a narrow page. How can I push the navigation bar to the right so that it is in line with the page content at all times?

image

@Kyfafyd
Copy link

Kyfafyd commented Dec 14, 2021

any update on this?

@jinhyung-park-info
Copy link

I would love to hear any updates on this too

@qiuyang50
Copy link

Adding "padding-left: 1.5em;" into ".masthead__menu-item" in the file "_sass/_masthead.scss" works for me.

The code should look as follows,

.masthead__menu-item {
display: block;
list-style-type: none;
white-space: nowrap;

&--lg {
padding-left: 1.5em;
padding-right: 2em;
font-weight: 700;
}
}

@justin13601
Copy link

justin13601 commented May 31, 2023

Changing padding-right of .masthead__menu-item in file _sass/_masthead.scss worked for me.

I simply needed an extra font size of space to align my masthead:

.masthead__menu-item {
 display: block;
list-style-type: none;
white-space: nowrap;

&--lg {
- padding-right: 2em;
+ padding-right: 3em;
  font-weight: 700;
  }
 }

@ShayJordan
Copy link

Is it possible to align the navbar items to the right of the page but keep the site title/logo in its default place, aligned left?

@rjzupkoii rjzupkoii added question Issues that are just questions. enhancement An enhancement. and removed question Issues that are just questions. labels Feb 14, 2024
@rjzupkoii rjzupkoii added this to the 2024 Refresh milestone Feb 14, 2024
@rjzupkoii rjzupkoii added documentation Changes to documentation only (e.g., README, Guide, Wiki Pages, etc.) and removed enhancement An enhancement. labels Mar 10, 2024
@rjzupkoii rjzupkoii modified the milestones: 2024 Refresh, Documentation Mar 10, 2024
@yidiwang21
Copy link

I made the following change to make my page contents align with the nav bar after the sidebar is turned off.
https://github.com/academicpages/academicpages.github.io/blob/master/_sass/_page.scss#L19

.page {
  @include breakpoint($large) {
    @include span(10 of 12 last);
    // @include prefix(0.5 of 12);
    // @include suffix(2 of 12);
    float: left;
  }

After this is done, it will be applied to the home page. The other pages are of archive layout, so you need to do the same thing at https://github.com/academicpages/academicpages.github.io/blob/master/_sass/_archive.scss#L12-L14

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Changes to documentation only (e.g., README, Guide, Wiki Pages, etc.)
Projects
None yet
Development

No branches or pull requests

8 participants