Joomla Templates Club 406,261 posts

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#202834

On my new business website (javelincommunications.com), I have a unique frontpage. As the final touch I want to fix the mainav in place so that the homepage scrolls under it and the menu is always on screen. We see this a lot on newer WordPress sites and it’s a cool effect; WordPress must make it easier. I’ve tried several seemingly related CSS solutions suggested in other posts, but they didn’t work. The menu gets in fixed in place vertically as it should but the horizontal float is all messed up with the mainnav block pushed to the extreme left, including the menu background even though that is set to repeat X to infinity. Anyone know the answer? This is for a customization of a JA University template.
Note: I did try adding left margin and it works at 100 percent view but when you expand or shrink the view the alignment quickly goes haywire.
Thanks,
-Jim G.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#555740

My css style below will help you to fix the menu bar in header

Open templates/ja_university_t3/css/custom.css file

Find and change

.t3-header {
background-image: url("../images/header-bg1.png");
border-bottom: none;
padding-top: 10px;
padding-bottom: 10px;
}

.navbar-default {
background-color: none;
background-image: url("../images/menu-bg1.png");
border-top: none;
}

to

.t3-header {
background-image: url("../images/header-bg1.png");
border-bottom: none;
padding-top: 10px;
padding-bottom: 10px;
position: fixed;
width: 100%;
z-index: 10;
}

.navbar-default {
background-color: none;
background-image: url("../images/menu-bg1.png");
border-top: none;
position: fixed;
width: 100%;
margin-top: 73px;
}

@media screen and (min-width: 768px) {
.t3-mainbody {
padding-top: 138px;
}
}

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#555795

Thank you for showing me this trick! I had to modify it somewhat to make it work on the homepage because there the T3 header is suppressed. I am using a unique frontpage and default layout for inside pages. There was one CSS width parameter that I missed – width at 100%.

Here is the modified, working homepage code:

@media screen and (min-width: 768px) {
.navbar-default {
background-image: url(“../../../images/homepage-menubg.png”);
border-top: none;
padding-top: 25px;
position: fixed;
width: 100%;
margin-top: 0px;
}

@media screen and (min-width: 768px) {
.t3-mainbody {
padding-top: 95px;
}

And the complete inside pages code:

@media screen and (min-width: 768px) {.t3-header {
background-image: url(“../images/header-bg1.png”);
border-bottom: none;
padding-top: 10px;
padding-bottom: 10px;
position: fixed;
width: 100%;
z-index: 10;
}
@media screen and (min-width: 768px) {.navbar-default {
background-color: none;
background-image: url(“../images/menu-bg1.png”);
border-top: none;
position: fixed;
width: 100%;
margin-top: 73px;
}

@media screen and (min-width: 768px) {
.t3-mainbody {
padding-top: 138px;
}

With a few adjustments this can probably be adapted to any newer JA T3 template. It was a little more complicated in my case because the site has a unique frontpage driven by separate stylesheet.

-Jim G.

[Author]

Posts