Can't Vertical Align Menu on Homepage

EverythingWx · December 4, 2020

I have a navigation menu on my homepage that I would like to be vertically centered on the page. I have used this code:

.sm-page-widget-nav a {
color: #fff !important;
vertical-align: middle;
}

and while it correctly changes the color to white, it does not vertically align the menu on the page. Any ideas? Thanks!

Allen · December 4, 2020

margin: 0 auto:
will center elements in the width of its parent div.

EverythingWx · December 5, 2020

> @Allen said:
> margin: 0 auto:
> will center elements in the width of its parent div.

No luck. I am not having trouble centering it horizontally, only vertically within the page.

Hikin' Mike · December 7, 2020

@EverythingWx said:
No luck. I am not having trouble centering it horizontally, only vertically within the page.

Please post your site.

EverythingWx · December 9, 2020

@"Hikin' Mike" My site is corymottice.smugmug.com. I am trying to vertically center the navigation menu. Thanks!

Hikin' Mike · December 9, 2020

@EverythingWx said:
@Hikin' Mike My site is corymottice.smugmug.com. I am trying to vertically center the navigation menu. Thanks!

Looks like they are, unless I'm missing something.

EverythingWx · December 9, 2020

@Hikin' Mike said:

@EverythingWx said:
@Hikin' Mike My site is corymottice.smugmug.com. I am trying to vertically center the navigation menu. Thanks!

Looks like they are, unless I'm missing something.

I want the menu (portfolio prints contact) on the home page to be vertically centered on the screen (no matter the size of the monitor). You can see my currently live website (https://corymottice.com/) as an example.

Thanks for looking into it!

Hikin' Mike · December 9, 2020

Got it. Add this to your Theme's Custom CSS Section:

/* Displays Menu Vertical */
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink {
  display: block;
  margin: 24px auto;
}

The margin: 24px auto; is top/bottom 24px and left-right to auto (centers left/right).

EverythingWx · December 9, 2020

@Hikin' Mike said:
Got it. Add this to your Theme's Custom CSS Section:
/* Displays Menu Vertical */
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink {
  display: block;
  margin: 24px auto;
}
The margin: 24px auto; is top/bottom 24px and left-right to auto (centers left/right).

Sorry. I am not being clear. I have attached an image that should help. I want to keep the menu horizontal as it is. I just want it to be aligned in the middle of the page. Thought maybe there is a way I could apply "vertical-align: middle;" or something. Hope this makes more sense. Thanks!

Hikin' Mike · December 9, 2020

Third time is a charm.

/* Centers Menu Vertical and Horizontal on Home Page */
.sm-page-home .sm-page-widget-nav {
  position: absolute;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

EverythingWx · December 10, 2020

@Hikin' Mike said:
Third time is a charm.

/* Centers Menu Vertical and Horizontal on Home Page */
.sm-page-home .sm-page-widget-nav {
  position: absolute;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Awesome. Thank you so much!

Can't Vertical Align Menu on Homepage

Comments