Creating a fixed header&navigation in Callisto (NEW AND UPDATED)
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
edfel - it's because you are not using showcase position on those pages - so you have to do this as well (example for one menu item "P&R"):
body.itemid-404 #g-main { margin-top: 140px; }
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.
-
-
-
- John Hubickey
- Rocketeer
- Posts: 71
- Thanks: 1
-
regarding the issue posted by edfel, I encountered this as well, but fixed it in a completely different way because I was too lazy and hadn't read this far in the topic.
My solution seems to work without needing to target specific menu ids.
I added the following to the custom.scss:
.platform-content { margin-top: 140px; }
platform-content appears to be a block a little deeper inside the main block and contains the content for an extension, or other joomla content like articles or blog layouts. platform-content is not on the homepage so the extra margin doesn't effect it, but its on all all other pages (default) changing the margin without having to target specific menu items.
Will this be a problem? We have a site mostly done with a mix of standard joomla articles and also a lot of extension menu items. - Last Edit: 8 years 11 months ago by John Hubickey.
HubuMedia
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
John Hubickey = "platform-content" is the wrong class to adjust with CSS since it can appear many times on the page.
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.
-
-
-
- edfel
- Elite Rocketeer
- Posts: 584
- Thanks: 0
-
Hi:
Will like to know the code for Kunena. Able to manage all other extensions but Kunena.
Thanks!
Edfel - Apache 2.4.23 | PHP 7.0.10 | MySQL 5.5.50 | RHEL 6.8
Joomla 3.6.2
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
edfel - I would need to see page - and you have changed login details now so I can't check for you.
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.
-
-
-
- Ricardo Sedassari
- Jr. Rocketeer
- Posts: 35
- Thanks: 1
- I applied this customization, but in responsive mode to smartphone happens a problem. How can i fixx it?
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
In your case you are using large address and telephone number so you need to use large values for the "top" and "padding-top". Next as that text wraps as you reduce the viewport then this means that you actually need different values for each viewport size so these are the media queries that you need to use in Gantry 5:
// Gantry 5 custom CSS file // import breakpoints @import "nucleus/mixins/breakpoints"; // 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
So you need to move the CSS for this tutorial inside each of the media queries and then alter the values to be appropriate for each viewport size.
Regards, Mark. -
The following users have thanked you: Ricardo Sedassari
- 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.
-
-
-
- Ricardo Sedassari
- Jr. Rocketeer
- Posts: 35
- Thanks: 1
- Thank you, Mark, but, as I am newbie, still prefer not risk these advanced settings. I'm still learning. Cheering for Gantry 5 incorporates, in the future, the option of setting the menu bar, as in other templates.
-
-
-
- Zesharck
- Sr. Rocketeer
- Posts: 146
- Thanks: 0
-
MrT wrote:
edfel - it's because you are not using showcase position on those pages - so you have to do this as well (example for one menu item "P&R"):
body.itemid-404 #g-main { margin-top: 140px; }
Regards, Mark.
Hi Mr T,
could you explain where you put this code ?body.itemid-404 #g-main { margin-top: 140px; }
because I have the same pb as Edfel about Jomsocial & Kunena components Vs Fixed header.
thx for your help
-
Time to create page: 0.069 seconds