SOLVED Align top-level menu-item to right?
-
-
- Gregor Ittensohn
- Newbie
- Posts: 4
- Thanks: 0
-
Hi there
I'm currently testing a Gantry 5 Template (Xenon) and am quite amazed by the framework. I'm no Web Designer and still could customize quite alot with Gantry already. Now here's one thing I couldn't do yet and need some help with:
My main menu has 4 top-level items:- news
- games
- devtools
- social
All of wich are aligned left. What I'd like to do however is move the last item 'social' all the way to the right.
Here's a link to the site:
Gaming Reverends
and an illustration:
This image is hidden for guests.
Please log in or register to see it.
_______________
What I tried:
First I thought I could just add a spacer particle to the menu, but inside the menu layout screen there's no spacer particle to select. So i made a custom-html particle with invisible content and set the blocks width to 100% but that didn't change anything at all.
Then I thought I'll just make a second menu and put that on the navbar section in the template layout and align it to the right but then it won't show up on mobile off-canvas menu. So I added the same second menu to the off-canvas and set the css class "hidden-desktop". But then the off-canvas toggle still shows on desktops revealing an empty off-canvas section.
So I guessed I might be able to do it with a custom.scss and tried to figure out how to do it. If I just try to align the last menu item block to the right that would do the same on off canvas I guess. So I probably still need an empty custom-particle or module between the last two menu items and somehow make it fill the remaining space of the nav bar so the social-menu-item appears on the far right. But am absolutely clueless on how to do that. I know how to create the custom scss - just not hwat to write to achieve want I want)
I'm probably thinking way too complicated and there's a much simpler solution. Anyone able to help me out here? - Last Edit: 9 years 3 months ago by Gregor Ittensohn.
-
-
-
- CMYKreative
- Elite Rocketeer
- Posts: 706
- Thanks: 15
-
Should be simple with a css tweak, try this:
li.g-menu-item.g-menu-item-135 {
float: right;
}
It's targetting the class of that last li item. -
The following users have thanked you: Gregor Ittensohn
- CMYKreative : Graphic Design , Web Design , Printing , Banner Ads , Branding and more.
-
-
-
- Gregor Ittensohn
- Newbie
- Posts: 4
- Thanks: 0
-
Thank you very much!
That was bugging me for a few hours - and shows how much a newbie I am. Something inside me knew this should be much easier than what I'm trying, but I just didn't realize I need to change the list element style and it would probably have taken a while more til I had realized i should use float: to move it all the way to the right.
So thanks alot again.
-
-
-
- Gregor Ittensohn
- Newbie
- Posts: 4
- Thanks: 0
-
I just noticed a new issue with this solution. Setting float:right will also let it float right in the off-canvas menu for mobiles.
Just in case anyone reads this post to find a solution for the same problem:
I nested the class :
.g-main-nav li.g-menu-item.g-menu-item-135 { float: right; }
.g-main-nav is for the horizontal menu in the navbar and thus the float will not affect the item-135 in the off-canvas menu.
-
-
-
- CMYKreative
- Elite Rocketeer
- Posts: 706
- Thanks: 15
-
OK, I'd do it slightly differently and add css for mobile only
// 600px or smaller
@media (max-width: 600px) {
li.g-menu-item.g-menu-item-135 {
float: none;
}
} -
The following users have thanked you: Gregor Ittensohn
- CMYKreative : Graphic Design , Web Design , Printing , Banner Ads , Branding and more.
-
-
-
- Gregor Ittensohn
- Newbie
- Posts: 4
- Thanks: 0
-
Even clearer and better. And another thing learned - thanks again
-
-
-
- CMYKreative
- Elite Rocketeer
- Posts: 706
- Thanks: 15
-
No problem, we're forever learning and finding the best way to do things ...
Nowadays, whatever we do, we have to consider the devices more and more, so it might work fine on desktop (in most/all browsers) but also needs to work on smartphone, tablet, Apple and Android operating systems, etc etc - CMYKreative : Graphic Design , Web Design , Printing , Banner Ads , Branding and more.
-
Time to create page: 0.042 seconds