Element im klebrigen Menü, das hinunter auf Rolle gedrückt wird

Hallo :) Ich bin ein wenig angedeutet, hier zu schreiben, aber ich bin am Ende meines Esprits.Element im klebrigen Menü, das hinunter auf Rolle gedrückt wird

Ich benutze WordPress und ein Thema - Kuchen - für eine Unternehmens-Website.

Ich versuche, eine dynamische Schaltfläche zu positionieren, um mit dem Wordpress-Menü in einem sticky Wrapper (.menu_wrapper) auszurichten. Egal was ich mache - schweben, anzeigen usw. - der Knopf springt leicht auf Scroll. Der Code ist an der richtigen Stelle, aber ich kann dieser Taste nicht die gleiche Klasse wie die Wordpress-Menüpunkte zuweisen - das ist eine Einschränkung (glaube ich). Ich würde es vorziehen, dies nur mit CSS beizubehalten.

Ich bin ein Autodidakt, lerne, wie ich gehe, in diese Person geworfen und tue mein Bestes. Ich weiß, dass dieser Ort ist voll von tatsächlichen Programmierer und Experten, weshalb ich heraus erreichen :)

Die CSS für die .login_button ist

.login_button { 
    display:inline !important; 
    margin-top: 38px !important; 
    float: left !important; 
    background:#e73f3a !important; 
    color:White !important; 
    font-family:roboto !important; 
    font-size:22px !important; 
    }

Sie können dieses Problem im Spiel sehen hier: https://netterrain.com - Es ist die LOG IN-Taste in rot.

Ich schätze wirklich jede Hilfe, die jemand anbieten kann. Vielen Dank :)

Quelle

2017-02-18 Johannah

Ich würde entferne die! wichtig auf ihnen, es ist nicht ideal, sie zu benutzen, wenn du in Spezifitätskriege gerätst, wenn du versuchst, die Regel außer Kraft zu setzen. Das div mit einer ID von Top_bar bekommt beim Scrollen eine Klasse von 'is-sticky' zugewiesen, so dass Sie eine zweite Regel haben können, die ungefähr so aussieht:' # Top_bar.is-sticky .login_button {margin-top: 12px; } 'oder wie auch immer Sie es aussehen möchten, was die Standard 38px überschreiben würde. Sie haben auch ansprechende Trigger, so dass Sie möglicherweise ein paar Regeln hinzufügen müssen. Hoffe das hilft dir auf dem Weg. – PhilS

Ihr Problem ist, dass die ursprüngliche margin-top, deren Wert 38px ist, sollte zu 13px geändert werden, wenn Sie mit dem Bildlauf beginnen.

Sie benötigen eine andere Klasse auf die Schaltfläche hinzufügen beim Scrollen:

Sie diese mit Hilfe von Javascript erreichen können:

// on scroll, 
$(window).on('scroll',function(){ 

     $('.login_button').addClass('is-scrolling'); 
});

Und in Ihrem CSS hinzufügen:

.login_button is .login_button .is-scrolling{ 

    margin-top: 13px !important; 
}

Quelle

2017-02-18 19:23:52

Arbeitete schön! Ich schätze deine Hilfe sehr, Yahya! Vielen Dank! – Johannah

Gald könnte helfen :) –

Element im klebrigen Menü, das hinunter auf Rolle gedrückt wird

Antwort

Verwandte Themen