Aligning elements in navigation rows and reducing row height
-
-
- Carl L.
- Sr. Rocketeer
- Posts: 136
- Thanks: 0
-
Hi,
I am trying to achieve the following in Calisto on J 3.5.1:
a) align the upper edge of the language switcher with the upper edge of the logo (they are both in the same navigation row)
b) align the lower edge of a slogan (=Custom HTML particle) and the main menu (both to be created in future in a second navigation row)
c) reduce the height of the two menioned navigation rows in the front end without reducing the size of the logo or the slogan text
From a few other posts on the height of navigation rows, it seems that I should specicy a custom.css a documented - or is there an easier way by configuring the logo and relevant custom HTML particle? Would the alignment that I mentioned also need to be done in the custom CSS?
The URL of the test site is in the secure area of this post.
Thank you for your assistance.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
a) remove the empty space (transparent areas) in your logo image that is causing the misalignment
b) "slogan" text? I couldn't see any?
c) alter the logo first and add the slogan and then I can look again. Please do a screenshot of your problem and annotate to make it clear what you want.
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.
-
-
-
- Carl L.
- Sr. Rocketeer
- Posts: 136
- Thanks: 0
-
Thanks for your reply, Mark.
I have added the slogan and have come to the conclusion that it looks quite OK where it is now in the desktop view. However, in a smartphone viewport the slogan's row height is definitely too high and I would also like to keep the language switcher to the right of the slogan. I have included the screenshot with comments that you reqested on the "About us" page at the URL specifed in the secure section.
Thank you for your help.
Regards
Carl
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Use this code...
// Gantry 5 custom CSS file // import breakpoints @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) { div.mod-languages { position: absolute; right: 0; bottom: 35px; } #g-navigation .size-43 p { line-height: 2rem; } } // typically max 59.938rem @include breakpoint(no-desktop) { } // Mobile Menu Breakpoint @media only all and (max-width: $breakpoints-mobile-menu-breakpoint) { } @import "nucleus/mixins/breakpoints";
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: Carl L.
- 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.
-
-
-
- Carl L.
- Sr. Rocketeer
- Posts: 136
- Thanks: 0
-
Thank you, Mark. Your custom CSS code brought about a significant improvement. The only difficulty I have left, is with the language switcher. Even after including your CSS code, it stays to the right of the slogan on the second line on a mobile device, rather than be displayed to the right of the logo on the top line. That would be an acceptable solution, if it were not for the fact that the last wored of the slogan overlaps the language switcher (even if the language switcher displays the flags vertically) in the following situation:
a) smartphone in horizontal orientation and
b) smarthphone viewport displays slogan on one line (i.e. viewport is large enough)
I have tried to avoid that overlap by inserting a spacer particle between the slogan and the language switcher, but it made no difference. Do you have any ideas how I could change that? If I reduce the width of the slogan custom HTML particle, the slogan would appear smaller, but move up vertically, i.e. it would no longer be centre-aligned with the logo to its left in a desktop layout. I hope that I have made myself clear.
Regards
Carl
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Feel free to alter the CSS I gave you to reposition the language switcher, I used right 0 and bottom 35px - but you can change to right -15px and top 10px instead.
Regards, Mark. -
The following users have thanked you: Carl L.
- 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.
-
-
-
- Carl L.
- Sr. Rocketeer
- Posts: 136
- Thanks: 0
-
Thank you, Mark. I have experimented with changing the margins, but if I move the language switcher to an absolute position in the logo row, it overlaps with the logo. I have not been able to find out how I can put both next to each other on the same row in the mobile layout, as the logo always seems to take up the whole viewport width. Is there a way of placing both next to each other, by getting the logo to shrink automatically to make enough space for the language switcher module to the right?
Regards
Carl
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
1. I don't see any overlap with the logo?
2. If you want to change position of the language switcher in different viewports then you can use that CSS I gave you in media queries instead with different values.// Gantry 5 custom CSS file // import breakpoints @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) { } // Mobile Menu Breakpoint @media only all and (max-width: $breakpoints-mobile-menu-breakpoint) { } @import "nucleus/mixins/breakpoints";
Media queries work like this:
if the viewport size is xxxxx then
use this css
endif
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.
-
Time to create page: 0.072 seconds