Home › Forums › Weaver Xtreme Theme › Menu line vertical positioning when combined with site logo to the left
This topic contains 9 replies, has 2 voices, and was last updated by OscarT_Norway 2 months ago.
-
AuthorPosts
-
October 10, 2019 at 14:32 UTC - Views: 44 #61837
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
October 10, 2019 at 16:32 UTC - Views: 39 #61838Please provide a link to your site
October 10, 2019 at 16:38 UTC - Views: 38 #61839http://kristoffersenogrebni.no/
I want my menu items vertically more or less at the same position as the bottom text line of the logo.
October 10, 2019 at 17:31 UTC - Views: 43 #61840This 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
October 10, 2019 at 17:55 UTC - Views: 30 #61841Thx 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
Menusin the
<label>Primary Menu Bar Custom CSS box.</label>
I will try out your solution.
October 10, 2019 at 18:04 UTC - Views: 27 #61842All 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
October 10, 2019 at 18:23 UTC - Views: 20 #61843Method 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.
October 10, 2019 at 19:07 UTC - Views: 17 #61846Testing 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.
October 10, 2019 at 19:24 UTC - Views: 18 #61847Thank, 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;}
October 10, 2019 at 19:41 UTC - Views: 8 #61848I see. Thx!
-
AuthorPosts
You must be logged in to reply to this topic.