SOLVED Hide arrows (indicator) in Dropdown Menu
-
-
- Michael D'Avis
- Jr. Rocketeer
- Posts: 26
- Thanks: 0
-
Hi, how can one hide the arrows (indicators) for the dropdown in the Mainmenu in the Hydrogen Template?
I cannot find any option in the Gantry 5 Framework itself.
As an example see this site: midas-it.de/ipsjoomla
And does anyone know how the get the menu items in the Mainmenu on the top a little bit smaller?
With that height it doesn't look that good. But I can't find where the height is defined.
Thank you, Michael
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13483
- Web Designer/Developer
-
Use this code...
.g-main-nav .g-toplevel > li.g-parent .g-menu-parent-indicator::after { content: none; }
Do you mean that you want to change the font-size of the main menu items? The "height" of the menu items is actually because of your custom CSS padding ?
Regards, Mark. -
The following users have thanked you: Michael
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Michael
- Newbie
- Posts: 5
- Thanks: 0
-
Thanks for the code. That works as desired.
Yes, I mean the height of the menu items.
I use the padding to align the mainmenu with the logo.
Otherwise the menu is too high.
Do you have a better solution?
Best regards,
Michael
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13483
- Web Designer/Developer
-
I'm a bit puzzled. You have added the padding to make the menu items line up with the logo in the text - fair enough. But if you want the menu items to be "less height" then the obvious thing to do would seem to be to make the logo smaller and therefore reduce the padding that you added?
If I'm not understanding you - please do a screengrab of your problem and annotate to make it clear.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Michael
- Newbie
- Posts: 5
- Thanks: 0
-
OK, here we go.
I need to align the Mainmenu with the logo, as you can see in menu1.jpg.
In menu2.jpg I have painted in yellow the space the menu itmes are using when I add the padding to the menu.
But I just want to push the menu down to align with the logo without allowing the menu items to occupy this much space, as it looks odd.
I hope now I have made myself clear.
Best regards,
Michael
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13483
- Web Designer/Developer
-
Whilst I can do this with CSS first:
1. please remove all the custom CSS that you have added associated with the menu adding margins and padding on various selectors.
2. Tell me what you want to happen as the viewport size reduces. Your menu starts to wrap as you reduce the viewport presumably you're happy for the second line only then to be aligned with the logo text?
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Michael
- Newbie
- Posts: 5
- Thanks: 0
-
OK, all custom CSS for this element should be removed now.
As the viewsize reduces I want the mobile menu to show up.
I have just assigned it to the home page. So all other pages are still showing the 'normal' unrepsonsive menu as you click them.
Best regards,
Michael
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13483
- Web Designer/Developer
-
There is insufficient room for the menu to fit on one line in all viewports so it will wrap on to two lines until you get to the mobile breakpoint. If you want to change the mobile break point you can do that in the base outline > styles (at bottom of the page).
Use this code...
nav.g-main-nav { bottom: 0; margin-right: 80px; position: absolute; } .g-main-nav .g-toplevel > li > .g-menu-item-container { padding-bottom: 0; padding-top: 0; }
To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .
Remember to recompile CSS from base outline too.
Regards, Mark. -
The following users have thanked you: Michael D'Avis
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Michael D'Avis
- Jr. Rocketeer
- Posts: 26
- Thanks: 0
-
Looks good so far and I'm OK with the breakpoint at the moment.
But now the menu is no longer aligned to the right, even though it's selected as block variation.
Best regards,
Michael
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13483
- Web Designer/Developer
-
This is going to be very tricky since I had to absolute position the menu. You can add a left margin of 70px to the CSS I already gave you but to refine it further you would need to change that value per viewport size using media queries too.
// Gantry 5 custom CSS file // import dependencies @import "dependencies"; // Typical values are the default breakpoints set in Gantry 5 // but these values are user definable in style settings // so that is why the code below uses mixins to get the actual // values from Gantry 5 template. // commonly used media queries // typically min 75rem @include breakpoint(large-desktop-range) { } // typically range 60rem to 74.938rem @include breakpoint(desktop-range) { } // typically 48rem to 59.938rem @include breakpoint(tablet-range) { } // typically 30rem to 47.938rem @include breakpoint(large-mobile-range) { } // typically max 30rem @include breakpoint(small-mobile-range) { } // Less commonly used media queries // typically min 60rem @include breakpoint(desktop-only) { } // typically min 48rem @include breakpoint(no-mobile) { } // typically max 47.938 rem @include breakpoint(mobile-only) { } // typically max 59.938rem @include breakpoint(no-desktop) { }
Media queries work like this:
if the viewport size is xxxxx then
use this css
endif
Regards, Mark. -
The following users have thanked you: Michael D'Avis
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.055 seconds