Joomla Templates Club 406,261 posts

[romainpaulits Friend romainpaulitsJoin date: July 2013Posts: 8Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#193455

Hello and Happy New Year to all of you.
I followed instructions at these links with no results:
http://t3-framework.org/documentation/bs3-customization#sticky-menu
http://www.youtube.com/watch?v=Zx_XhXrbVlA

Top menu always scrolls out of the page.
Here is my PHP code inside header.php
<!– MAIN NAVIGATION –>
<nav id=”t3-mainnav” class=”t3-mainnav navbar-fixed-top navbar-collapse-fixed-top span10″>
(in red, the code I have added)

Can anybody help?
Same result on different browsers
Thank you

Temporary website link is http://www.paulits.com/romain2

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#517327

Try this with your custom.css rule . . .


#t3-header {
left: 352px;
position: fixed;
z-index: 3000;
}

See if that works out better for you.

[romainpaulits Friend romainpaulitsJoin date: July 2013Posts: 8Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#517336

Hello Tom,
Thank you for help.
Almost done, now the menu is sticked to the top of page, but….352 pixels from the left border. It should be centered with the page whatever the browser size, isn’t it?
Best regards

[Css Magician Friend Css MagicianJoin date: October 2014Posts: 741Downloads:43Uploads:53 Thanks: 114 Thanked: 366 times in 263 posts]

#517463

@romainpaulits,

Please follow steps below:

Open …templatesja_beranistplsblocksheader.php file and replace:


<!-- HEADER -->
<header id="t3-header" class="t3-header container">
<div class="row">
....................
</div>
</header>
<!-- //HEADER -->


with:


<!-- HEADER -->
<header id="t3-header" class="t3-header wrap">
<div class="container">
<div class="row">
....................
</div>
</div>
</header>
<!-- //HEADER -->

(add those in red)

Then, open …templates/ja_beranis/css/custom.css file and add following CSS rule:

#t3-header {
position: fixed;
width: 100%;
z-index: 3;
}

.t3-header .container {
background-color: #01A3D4;
padding-bottom: 20px;
padding-top: 20px;
}


Hope it helps.

[romainpaulits Friend romainpaulitsJoin date: July 2013Posts: 8Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#517519

It works perfectly!
Thanks a lot “Magician” 😀

[romainpaulits Friend romainpaulitsJoin date: July 2013Posts: 8Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#517808

Hello Css magician 🙂
In fact, I still have problems:
Then I reinstalled from start the latest Beranis template, but still te same troubles after css modifications according to you.

1 – Menu is now sticky, OK 🙂 but I have now a big shadow under it andI would like to remove it.
2 – Page content window is now under (then partially hidden by) the menu > CHECK MENU ITEM “BACKGROUND”
http://paulits.com/romain2/index.php/background

3 – Logo is still not the good size (200×30) even after modification in template.css as follows
.logo-image h1 a {
background-image: url(“../images/logo.png”);
background-repeat: no-repeat;
width: 200px;
height: 30px;
}

Temporary website link is http://www.paulits.com/romain2

Thanks

[Css Magician Friend Css MagicianJoin date: October 2014Posts: 741Downloads:43Uploads:53 Thanks: 114 Thanked: 366 times in 263 posts]

#517851

@romainpaulits
I list the fixes for each issue you mentioned respectively below:

1) Open …templates/ja_beranis/css/custom.css file and add following CSS rule:


.t3-header .container {
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}


2) Open …templates/ja_beranis/css/custom.css file and add following CSS rule:


.t3-mainbody {
padding-top: 100px;
}


3) Could you explain a little more on the logo size. Your site shows the logo image size (200×30), how you wish this to be changed?

[romainpaulits Friend romainpaulitsJoin date: July 2013Posts: 8Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#517923

Thank you again, it seems to be ok now
except that some page item overlap with menu when scrolling the page,
for example news module + google map items

Concerning the logosize, I already fixed it 🙂

Best regards
Romain

[romainpaulits Friend romainpaulitsJoin date: July 2013Posts: 8Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#517924

overlap is solved

1 user says Thank You to romainpaulits for this useful post

1. Css Magician

[bcollie Friend bcollieJoin date: February 2010Posts: 28Downloads:0Uploads:4 Thanks: 6 Thanked: 1 times in 1 posts]

#518946

Is it possible to list the final code snippets and the files they belong to, which are needed to make Sticky Menus work in JABeranis?

I tried working through the code above, with the corrections, and ended up losing my Logo and Slogan and seeing my MegaMenu in white space at the top of screen.

[Css Magician Friend Css MagicianJoin date: October 2014Posts: 741Downloads:43Uploads:53 Thanks: 114 Thanked: 366 times in 263 posts]

#519187

@bcollie,

Please follow this thread http://www.joomlart.com/forums/topic/repost-beranis-sticky-menu-and-troubles/, I think it can help to resolve your sticky menu issue. If it still persists, please post your url of site here, I will help you out.

[bcollie Friend bcollieJoin date: February 2010Posts: 28Downloads:0Uploads:4 Thanks: 6 Thanked: 1 times in 1 posts]

#519384

So far I have done the following:

Open …templatesja_beranistplsblocksheader.php file and replace:

Code:
<!– HEADER –>
<header id=”t3-header” class=”t3-header container”>
<div class=”row”>
………………..
</div>
</header>
<!– //HEADER –>

with:

Code:
<!– HEADER –>
<header id=”t3-header” class=”t3-header wrap”>
<div class=”container”>
<div class=”row”>
………………..
</div>
</div>
</header>
<!– //HEADER –>

(add those in red)

I have also created a custom.css file like this
…./templates/ja_beranis/css/custom.css

The custom.css now contains the folllowing after adding all the advice in your previous posts:

#t3-header {
position: fixed;
width: 100%;
z-index: 3;
}

.t3-header .container {
background-color: #01A3D4
padding-bottom: 20px;
padding-top: 20px;
}

.t3-header .container {
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}

.t3-mainbody {
padding-top: 100px;
}

#t3-header {
z-index: 1012;
}

The Main Menu is now sticky (hooray) but the result is that I have now lost visibility of Positions 1-4.

So the website looks like the attached screen clip
My new site in development is at http://www.dreamwoodinternational.com/joomla32

---

Attachments:

1. 

[Css Magician Friend Css MagicianJoin date: October 2014Posts: 741Downloads:43Uploads:53 Thanks: 114 Thanked: 366 times in 263 posts]

#519424

@bcollie,

Try to open file: …./templates/ja_beranis/css/custom.css and add css rule :


.ja-content-mass-top {
padding-top:100px;
}


Note that: you should replace:


.t3-header .container {
background-color: #01A3D4;
padding-bottom: 20px;
padding-top: 20px;
}


with


.t3-header .container {
background-color: #A954CC;
padding-bottom: 20px;
padding-top: 20px;
}


#A954CC is a pink color

1 user says Thank You to Css Magician for this useful post

1. bcollie

[bcollie Friend bcollieJoin date: February 2010Posts: 28Downloads:0Uploads:4 Thanks: 6 Thanked: 1 times in 1 posts]

#519436

Excellent thank you

Can I ask another CSS related question or should I open a new post?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#519437

Best to start a new thread with your new issue – so others can benefit from the journey to the solution.

😎

[Author]

Posts