[Resolved] Top Menu

This topic contains 5 replies, has 2 voices, and was last updated by  Puro Support 10 months, 3 weeks ago.

  • Author
    Posts
  • #5991

    tipsfromitaly
    Participant

    Hi Guys!

    I love the puro theme. It’s working really well.

    I just wanna tweek one little thing – my menu hight is too big and i’d like to make it 4 rem. can you help me do that? thanks so much!

    Veronica

    #5992

    Puro Support
    Keymaster

    Hi Veronica

    Thanks for reaching out. Please, try adding the following to Appearance > Customize > Additional CSS or your own Custom CSS plugin.

    /* Header */
    .site-header {
        padding: 40.5px 0;
    }

    Adjust the padding value as required. The single value manages top and bottom padding which in turns sets the header height.

    #5994

    tipsfromitaly
    Participant

    Hi,

    I did, but this happened.

    screenshot

    Can you tell me how to:
    – have the two sides in white too?
    – move the whole menu to the right?
    – insert a logo or text on the left?
    – is my menu still going to be responsive on mobile devices?

    thank you,

    #5997

    Puro Support
    Keymaster

    Sorry about that, I thought this was for the Puro theme, I’ve moved this topic to the Ultra forum. Here is the easiest way to proceed, I think 🙂

    1. Remove the Custom CSS previously added.
    2. Disable the top bar at Appearance > Customize > Theme Settings > Top Bar, disable the checkbox.
    3. Enable the Header at Appearance > Customize > Theme Settings > Header, enable the checkbox.
    4. Add your logo at Appearance > Customize > Theme Settings > Logo.
    5. Go to Appearance > Customize > Menus > Menu Locations and save a menu to the Primary Menu location.
    6. Customize > Additional CSS, add the following:

    .site-header,
    .site-header .container,
    .site-header .site-branding-container,
    .main-navigation .menu-search {
    	height: 56px
    }
    .main-navigation div>ul>li>a,
    .main-navigation .menu-search .search-icon:before {
    	height: 56px;
    	line-height: 56px
    }
    .main-navigation ul ul {
    	top: 53px
    }

    If you want to change the header height further, change all the 56px values. The last value must be 2px less than all the other values.

    56px is 4em considering a 14px base.

    Hope that helps.

    #6009

    tipsfromitaly
    Participant

    Hi!

    I had to specify.

    Thanks so much for the help and the elaborate comprehensive explanation. Somehow I wasn’t notified for your response. Super glad you got back to me! It’s beautiful now! Just like I wanted it 🙂

    Thanks again!!

    Veronica

    #6010

    Puro Support
    Keymaster

    Super 🙂 Glad to hear that did the trick. All the best with your site.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Scroll to top