Reducing the menu bar
-
-
- Kouskousou
- Sr. Rocketeer
- Posts: 131
- Thanks: 0
-
Hello,
How is it possible to reduce the menu bar so that it is at the same height as the navigation buttons on the attachment screenshot
I can not find
Thank you for your help
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
Kouskousou wrote:
Hello,
How is it possible to reduce the menu bar so that it is at the same height as the navigation buttons on the attachment screenshot
I can not find
Thank you for your help
In your [JOOMLA-ROOT]/templates/g5_hydrogen/custom/scss/custom.scss (<--CLICK this is link) file add this:
#g-navigation .g-container .g-block .g-content.g-particle { margin-bottom: .2rem; padding-bottom: 0; } #g-navigation .g-container .g-block .g-content.g-particle img { position: relative; top: -0.6rem; }
-
-
-
- Bertrand Pascal
- Sr. Rocketeer
- Posts: 219
- Thanks: 6
-
Hi
i have tested your codes
they are ok but how i can remove the gap between level 0 and level 1 (dropdown menu)
This image is hidden for guests.
Please log in or register to see it.
thanks
Bertrand - www.en-toutes-lettres.fr
-
-
-
- Bertrand Pascal
- Sr. Rocketeer
- Posts: 219
- Thanks: 6
-
Hi
it is the link
www.demo-gantry5.en-toutes-lettres.fr/hy...iation-fr/menu-petit
I have added CSS codes
#g-navigation .g-container .g-block .g-content.g-particle { margin-bottom: .2rem; padding-bottom: 0; } #g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container, #g-navigation .g-container .g-block .g-content.g-particle img { position: relative; top: -0.6rem; }
into custom CSS/JS atom
take care
Bertrand - www.en-toutes-lettres.fr
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
Bertrand Pascal wrote:
Hi
it is the link
www.demo-gantry5.en-toutes-lettres.fr/hy...iation-fr/menu-petit
I have added CSS codes
#g-navigation .g-container .g-block .g-content.g-particle { margin-bottom: .2rem; padding-bottom: 0; } #g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container, #g-navigation .g-container .g-block .g-content.g-particle img { position: relative; top: -0.6rem; }
into custom CSS/JS atom
take care
Bertrand
Hi Bertrand
It's being caused by your custom code:
#g-navigation .g-container .g-block .g-content.g-particle { margin-bottom: .625rem; padding-bottom: 0; }
Remove that and the dropdowns will align properly with the parent.
One question though, why are you adding CSS through an Atom? Wouldn't it be just as easy to create a Custom CSS file?
-
-
-
- Bertrand Pascal
- Sr. Rocketeer
- Posts: 219
- Thanks: 6
-
Hi Dan, Thanks
I don't know where you found this code
I create a fresh install of hydrogen to clarified and add my codes in custom.scss
www.hydrogen-test.matexa.com/
same issue
removing#g-navigation .g-container .g-block .g-content.g-particle{margin-bottom:0.2rem;padding-bottom:0}
just fill space with green background
One question though, why are you adding CSS through an Atom? Wouldn't it be just as easy to create a Custom CSS file?
It is my hydrogen (gantry) demo website
With Atom I can personnalise my outline with css i don't want in other outline
take care
bertrand - www.en-toutes-lettres.fr
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
Bertrand Pascal wrote:
Hi Dan, Thanks
I don't know where you found this code
I create a fresh install of hydrogen to clarified and add my codes in custom.scss
www.hydrogen-test.matexa.com/
same issue
removing#g-navigation .g-container .g-block .g-content.g-particle{margin-bottom:0.2rem;padding-bottom:0}
just fill space with green background
One question though, why are you adding CSS through an Atom? Wouldn't it be just as easy to create a Custom CSS file?
It is my hydrogen (gantry) demo website
With Atom I can personnalise my outline with css i don't want in other outline
take care
bertrand
It was in a special file called "menu.???" I don't remember the rest of the name but assumed it was coming from your atom. It would be easier for me if you you used the stock CSS settings that came with the template and then I could help you to get to your goal
As for the Custom CSS it's just my preference to keep modifications in ONE PLACE so they're easy to find. As for specificity I use menu page suffixes and Outline class names to keep those changes for only certain parts of the site. Your Custom CSS file doesn't have to be global in nature
- Last Edit: 7 years 9 months ago by DanG.
-
-
-
- Bertrand Pascal
- Sr. Rocketeer
- Posts: 219
- Thanks: 6
-
Hi Dan
in this website
www.hydrogen-test.matexa.com/
I have a fresh joomla 3.6.0 install, a fresh Gantry 5 + Hydrogen install dedicated to this topic, no more atom or additionnal css which can interfer custom.css file which contains only this codes
#g-navigation .g-container .g-block .g-content.g-particle { margin-bottom: 0.2rem; padding-bottom: 0; } #g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container, #g-navigation .g-container .g-block .g-content.g-particle img { position: relative; top: -0.6rem; }
And unfortunatly, I don't found the trick to align dropdowns properly with the parent
take care
bertrand - www.en-toutes-lettres.fr
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
- Okay I see the difference. My RocketLauncher placed the logo in the header so my nav bar is higher than yours. Yours has the logo in a module position above the header. Is this the way you intend to keep the site?
-
Time to create page: 0.055 seconds