Zweites Menü das fix/fest positioniert beim scrollen ist

79erweb · 1. Dezember 2016

Hallo,
brauche mal Hilfe bei einer Modifikation eines Templates. Ziel ist es ein zweites Menü oberhalb des Hauptmenüs für ein Modul (sogenannte JomSocial Bar) zu schaffen.
Bisher ist auch alles gut gelaufen nur kann ich diese Position nicht per CSS über einen custom.css ansprechen und dieses auch nicht „sticky“ (Fest) machen so dass es nicht aus der Seite rausscrollt beim scrollen.

Code der header.php:

PHP

<!-- MAIN NAVIGATION --><section id="header-social">    <jdoc:include type="modules" name="<?php $this->_p('social-mainnav') ?>" style="none" /></section> <!-- <header id="t3-mainnav" class="wrap navbar navbar-default navbar-fixed-top t3-mainnav"> --><header id="t3-mainnav" class="wrap navbar navbar-default header t3-mainnav affix-top">                 <!-- OFF-CANVAS -->

Bei den <section id="header-social"> bin ich mir nicht sicher ob id oder class richtig wäre

Code des custom.css:

CSS

body{padding-top:0px!important;}
.off-canvas-toggle {   position: absolute!important;}
.header.affix {width: 100%;  z-index: 999;  top: 0px;}
.header{webkit-transition: top 0.3s;  -o-transition: top 0.3s; transition: top 0.3s;  z-index: 1001;}
 
.header-social .custom {
background-color: #0077bb;
position: fixed;
height: 44px;
line-height: 44px;
top: 0;
left: 0;
text-align: center;
z-index: 1000;
width: 100%;
}

Alles anzeigen

Bin für jede hilfe dankbar. Seite: www.f-gallus.de

anka · 1. Dezember 2016

Hallo

Mir ist zwar nicht ganz klar, warum du "navbar-fixed-top" auf "affix-top" geändert hast, aber versuche es mal damit:

PHP

<!-- MAIN NAVIGATION -->


<!-- <header id="t3-mainnav" class="wrap navbar navbar-default navbar-fixed-top t3-mainnav"> -->
<header id="t3-mainnav" class="wrap navbar navbar-default header t3-mainnav affix-top">


<section id="header-social">
    <jdoc:include type="modules" name="<?php $this->_p('social-mainnav') ?>" style="none" />
</section> 
 
                <!-- OFF-CANVAS -->

Alles anzeigen

79erweb · 3. Dezember 2016

Hallo Anka,

danke dir für die Hilfe, es hat geklappt. Jedoch wo du Recht hast ist das Problem mit den affix. Da es ein Template ist – weiß ich nicht warum affix genutzt worden ist. Nun ist das Problem das beim Klicken auf der Seite diese immer hoch und runter springt, wäre echt klasse wenn du da auch eine Lösung hättest. Was mir aufgefallen ist ändert sich der Code von affix zu affix-top und zurück. Eine änderung von affix-top zu nur affix brachte mir keine besserung bei.

Gruss

anka · 3. Dezember 2016

Ändere zuerst mal das "affix-top" wieder zu "navbar-fixed-top" :

Alt:

Code

<!-- <header id="t3-mainnav" class="wrap navbar navbar-default navbar-fixed-top t3-mainnav"> --><header id="t3-mainnav" class="wrap navbar navbar-default header t3-mainnav affix-top">

Neu:

Code

<header id="t3-mainnav" class="wrap navbar navbar-default navbar-fixed-top t3-mainnav"><!-- <header id="t3-mainnav" class="wrap navbar navbar-default header t3-mainnav affix-top"> -->

Ersetze anschliessend diese Regel im CSS

CSS

body {    padding-top: 0px !important;}

durch

Code

@media (min-width: 991px) {
    body {
        padding-top: 100px;
    }
}

Danach sollte nichts mehr springen

79erweb · 3. Dezember 2016

geschafft -VIELEN VIELEN LIEBEN DANK! Bin jetzt echt happy

Zweites Menü das fix/fest positioniert beim scrollen ist

Zum hilfreichsten Beitrag springen

Tags