Center vetically menu

konan65

In my website I'm trying to center vertically the right menu

I've tried different solutions, but I've never been able to do it.

Another request: I'd like to add a text between the menu and the logo, but if I do that, all the graphics will be blurred from mobile, and I can't understand what I have to resize

Thank you very much to anyone who can help me

Hikin' Mike

We need to see your website first. Please post your site.

konan65

The site is www.ivannotarphoto.it

Hikin' Mike

@konan65 said:
In my website I'm trying to center vertically the right menu

If your talking about this:

Add this to your theme's Custom CSS section:

/* Changes Menu from Horizontal to Vertical */
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink {
  margin: 0 auto 20px;
  display: block;
}

konan65

@Hikin' Mike said:

@konan65 said:
In my website I'm trying to center vertically the right menu

If your talking about this:

Add this to your theme's Custom CSS section:

/* Changes Menu from Horizontal to Vertical */
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink {
  margin: 0 auto 20px;
  display: block;
}

No, i want to center vertical inside the div the horizontal menu

Hikin' Mike

Add text-align: center; to the CSS from above. Then you'll need to add another (spacer) block to the right. Set all three blocks for 33%.

konan65

@Hikin' Mike said:
Add text-align: center; to the CSS from above. Then you'll need to add another (spacer) block to the right. Set all three blocks for 33%.

It doesn't work, maybe I haven't explained what I'm trying to do:
I've got this div highlighted in blue and I'd like the menu to be vertically centered inside, and now it's fixed at the top.

with text-align: center; the menu is centered horizontally, but I would like to keep it aligned to the right

why do I have to add a spacer on the right, for the title on mobile? If it is for that I have already tried to set the width to 33% for all the elements but on mobile the page is not displayed well however

Hikin' Mike

That helps a lot.

Add this to your Theme's CSS Section:

/**
* Centers Menu Vertically
***********************************/
.sm-user-ui .sm-page-widget-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* Overrides the widget margins because we can't type in 'auto' */
.sm-user-ui .sm-page-widget-28420293 .sm-page-widget-content {margin: auto 36px auto auto;}

Looks like this:

@konan65 said:
why do I have to add a spacer on the right, for the title on mobile? If it is for that I have already tried to set the width to 33% for all the elements but on mobile the page is not displayed well however

Now that I understand what your talking about, you don't need it.

konan65

Thanks a lot.
Amy suggestions about the problem on mobile view with Hamburger menu and title?

Hikin' Mike

@konan65 said:
Thanks a lot.
Amy suggestions about the problem on mobile view with Hamburger menu and title?

Are you wanting to add text only on mobile like this?

If that's the case you need to add a HTML/CSS Block between your logo and your menu.

Add this to your HTML section:
<div class="header-text"><p>Ivan Notarstefano Photography</p></div>

Add this to the CSS section:

.header-text {display: none;}

@media (max-width: 736px) {

  .header-text {display: block;}

  .header-text p {
    font-size: 24px;
    color: white;
    text-align: center;
  }

}

konan65

@Hikin' Mike said:
Are you wanting to add text only on mobile like this?

No, I want to add the title always, I tried both with an html block and with a title block, on desktop I have no problems, but on mobile, with both methods, I have some display problems

html desktop

html mobile

html code

<div class="header-text"><p>Ivan Notarstefano Photography</p></div>

.header-text {display: block;}

.header-text p {
    font-size: 36px;
    color: white;
    text-align: center;
    line-height: 1.1;
  }

@media (max-width: 736px) {
  .header-text p {
    font-size: 24px;
    color: white;
    text-align: center;
  }
}

title desktop

title mobile

Hikin' Mike

Since you removed the text. I can't help. I also don't know how you want the text to look.

Where do you want your logo on mobile?
Where do you want the text on mobile?
Where do you want the hamburger menu on mobile?

For me to help you you need to put your text back. Please use the HTML/CSS block.

Add this to your HTML section:
<div class="header-text"><p>Ivan Notarstefano Photography</p></div>

Add this to your CSS section:

.header-text p {
  font-size: 36px;
  color: white;
  text-align: center;
  line-height: 1.1;
}

@media (max-width: 736px) {

  .header-text p {font-size: 24px;}

}

It's not going to look as you wanted now, but I need to see it live.

konan65

@Hikin' Mike said:
Since you removed the text. I can't help. I also don't know how you want the text to look.

Where do you want your logo on mobile?
Where do you want the text on mobile?
Where do you want the hamburger menu on mobile?

For me to help you you need to put your text back. Please use the HTML/CSS block.

Add this to your HTML section:
<div class="header-text"><p>Ivan Notarstefano Photography</p></div>

Add this to your CSS section:

.header-text p {
  font-size: 36px;
  color: white;
  text-align: center;
  line-height: 1.1;
}

@media (max-width: 736px) {

  .header-text p {font-size: 24px;}

}

It's not going to look as you wanted now, but I need to see it live.

Ok, I added the title again
I'd like to have the logo on the left, the title in the middle and the menu on the right (the burger for the mobile), both on desktop and on mobile

Hikin' Mike

@konan65 said:
Ok, I added the title again
I'd like to have the logo on the left, the title in the middle and the menu on the right (the burger for the mobile), both on desktop and on mobile

Add this to your Theme's Custom CSS Section:

/**
* Centers Logo, Header Text and Menu on Mobile 
***********************************************/
@media (max-width: 736px) {

  .sm-user-ui .sm-page-layout .sm-page-layout-row .sm-page-layout-column[data-layout-column="1"] {
    position: absolute;
    top: 25px;
    right: 0;
  }

}  

konan65

Hi, I just noticed a problem on my site on mobile

How can I fix it?