Menu line vertical positioning when combined with site logo to the left

[Answered OscarT_NorwayParticipant]

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

[scramblerModerator]

Please provide a link to your site

[OscarT_NorwayParticipant]

http://kristoffersenogrebni.no/

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

[Best Answer scramblerModerator]

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

[OscarT_NorwayParticipant]

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.

[scramblerModerator]

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

[OscarT_NorwayParticipant]

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.

[OscarT_NorwayParticipant]

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.

[scramblerModerator]

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

[OscarT_NorwayParticipant]

I see. Thx!

[Author]

Posts