Home Forums Weaver Xtreme Theme Menu line vertical positioning when combined with site logo to the left

Topic Resolution: Answered

This topic contains 9 replies, has 2 voices, and was last updated by  OscarT_Norway 4 days, 5 hours ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #61837
    Answered

    OscarT_Norway
    Participant

    I tried to use the advice in this guide

    https://guide.weavertheme.com/menu-mar-advanced-customizations/#xlogo

    using the following CSS:

    <code class=”css plain”>#nav-primary ul.wvrx-menu {<code class=”css keyword”>padding-top<code class=”css plain”>:<code class=”css value”>2em<code class=”css plain”>;}

    However, that moved both the logo and the menu items down.

    What am I doing wrong?

    WP 5.2.3

    Weaver Xtreme 4.3.1.5

    #61838

    scrambler
    Moderator

    Please provide a link to your site

    #61839

    OscarT_Norway
    Participant

    http://kristoffersenogrebni.no/

    I want my menu items vertically more or less at the same position as the bottom text line of the logo.

    #61840
    Best Answer

    scrambler
    Moderator

    This reply has been accepted as the best answer.

    I don’t know where you put the custom CSS rule, as it is not in your site.

    Method 1)

    The rule does work if typed properly and placed in the Theme Global Custom CSS rule box. the value that position the text where you want is 6em

    #nav-primary ul.wvrx-menu {padding-top:6em;}

    Method 2)

    That said, when the browser gets below 955px wide, the menu will stack under the logo, at that point you would want the padding removed. To do that, the rule above should be changed to

    @media all and (min-width:955px){
    #nav-primary ul.wvrx-menu {padding-top:6em;}
    }

    Method 3)

    You can also optimize the design by allowing the logo to scale down. For example replacing the rules above by the ones below will do that

    .menu-primary .custom-logo-on-menu img {height:calc(2em + 6vw);}
    @media all an (min-width:880px){
    #nav-primary ul.wvrx-menu {padding-top:6em;calc(1.8em + 4.2vw)}
    }

    Method 4)

    You can avoid the menu from ever have to stack below the logo if you change the align menu setting from alignwide to right, then use the rules below to limit how wide it gets and scale the logo

    .menu-primary .custom-logo-on-menu img {height:calc(2em + 6vw);}
    #nav-primary ul.wvrx-menu {padding-top:6em;calc(1.8em + 4.2vw)}
    .menu-primary {max-width:1200px;margin:0 auto;}

    Method 5)

    If you don’t want the menu to stack under the logo but do not want the logo to scale, do the following

    • Set the menu to align right instead of alignwide
    • Set the logo image height to 7 em instead of 8 em
    • use the rules below

    #nav-primary ul.wvrx-menu {padding-top:5.5em;}
    .menu-primary {max-width:1200px;margin:0 auto;}

     

    I would recommend method 4 or 5 🙂

    If you have a problem implementing any of these, leave the CSS in place and post back so we can see why it is not doing what it is supposed to

    #61841

    OscarT_Norway
    Participant

    Thx for a very detailed answer.

    The CSS wasn’t there, I agree, but when I tried it out I placed it in the customizer under

    Custom CSS
    Menus

    in the

    <label>Primary Menu Bar Custom CSS box.</label>

    I will try out your solution.

    #61842

    scrambler
    Moderator

    All of the CSS mentioned goes into Main Options > Fonts & Custom > Custom CSS Rule box

    Or Customize > Custom CSS > Global Custom CSS

    Not the menu Custom CSS

    #61843

    OscarT_Norway
    Participant

    Method 1 worked immediately. Changed 6 to 7 to get the menu line a little lower.

    Looking into the stacking problem now.

    Thx again.

    I have another question involving menus, but I’ll Make another thread for it so the solution is easier to find for other people.

    #61846

    OscarT_Norway
    Participant

    Testing done.

    A few remarks, so problems can be avoided by others reading your excellent solution.

    Method 2 and 3:

    You have lost a ‘d’ in ‘and’, so the @media line doesn’t work as it should before that is corrected.

    The @media line may also be needed for method 4 and 5, to avoid the extra padding above the dropdown menu on mobile phones.

    #61847

    scrambler
    Moderator

    Thank, I corrected the typo.

    Once the menu does not stack, you can use the .is-desktop to prevent padding on mobile as is explained in the original Guide article

    .is-desktop #nav-primary ul.wvrx-menu {padding-top:5.5em;}

    #61848

    OscarT_Norway
    Participant

    I see. Thx!

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

You must be logged in to reply to this topic.