Center vetically menu

konan65konan65 Registered Users Posts: 13 Big grins

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

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
  • konan65konan65 Registered Users Posts: 13 Big grins

    The site is www.ivannotarphoto.it

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @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;
    }
    
  • konan65konan65 Registered Users Posts: 13 Big grins

    @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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited July 27, 2020

    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%.

  • konan65konan65 Registered Users Posts: 13 Big grins

    @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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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.

  • konan65konan65 Registered Users Posts: 13 Big grins

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

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited July 28, 2020

    @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;
      }
    
    }
    
  • konan65konan65 Registered Users Posts: 13 Big grins

    @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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited July 29, 2020

    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.

  • konan65konan65 Registered Users Posts: 13 Big grins

    @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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @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;
      }
    
    }  
    

  • konan65konan65 Registered Users Posts: 13 Big grins

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


    How can I fix it?

Sign In or Register to comment.