WordPress एडमिन बार ओवरलैपिंग ट्विटर बूटस्ट्रैप नेविगेशन [बंद]

10

बन्द है। यह सवाल ऑफ टॉपिक है । यह वर्तमान में उत्तर स्वीकार नहीं कर रहा है।

इस प्रश्न को सुधारना चाहते हैं? प्रश्न अपडेट करें तो यह है -विषय पर के लिए वर्डप्रेस विकास स्टैक एक्सचेंज।

5 साल पहले बंद हुआ ।

मैं ट्विटर बूटस्ट्रैप ( 2.3.0) नेवी बार को ओवरलैप करने के साथ वर्डप्रेस एडमिन बार के साथ एक मुद्दा रहा हूं । मैंने यह ठीक करने की कोशिश की है:

body.admin-bar .navbar-fixed-top {
    top: 28px;
}

.navbar .brand {
    color: #000 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 30px
        rgba(255, 255, 255, 0.125);
    font-weight: bold !important;
}

.nav-container {
    padding-left: 0;
    padding-right: 0;
}

.nav-tabs, .nav-pills {
    margin-top: -6px;
}

.dropdown-menu li>a:hover,.dropdown-menu li>a:focus,.dropdown-submenu:hover>a
    {
    color: #fff !important;
}

#inner-header {
    width: 100%;
}

input,textarea,select,.uneditable-input {
    margin-bottom: 0;
}

.navbar-form,.navbar-search {
    margin: 0 0 9px;
}

.navbar-search {
    padding-left: 0;
}

#s {
    width: 100px;
}

लेकिन अफसोस कि यह अभी भी एक मुद्दा है। मैं सोच रहा हूं कि क्या फिक्स उपलब्ध हैं?

— TheWebs
स्रोत

17

अपने ट्विटर बूटस्ट्रैप नेविगेशन बार के साथ वर्डप्रेस एडमिन बार को ओवरलैप होने से कैसे रोकें।

इसके जवाब में: ट्विटर बूटस्ट्रैप नेविगेशन में वर्डप्रेस एडमिन बार ओवरलैपिंग

इनके द्वारा पूछा गया: @TheWebs

यदि आप वर्डप्रेस के साथ ट्विटर बूटस्ट्रैप का उपयोग कर रहे हैं और आपके नेविगेशन बार के साथ वर्डप्रेस एडमिन बार के साथ एक समस्या है, तो आप शायद इनमें से कुछ उत्तरों से बहुत निराश हैं। मैंने हर जगह समाधान की तलाश की और अंत में केवल एक निचले गियर में शिफ्ट होने का निर्णय लिया और एक समाधान निकाला जो कि मुझे वही करने की आवश्यकता है जो मुझे करना चाहिए।

तो यहाँ एक उत्तर है कि वर्डप्रेस एडमिन बार को छिपाए नहीं, या अपने पेज के नीचे वर्डप्रेस एडमिन बार को स्थानांतरित करें। यह उत्तर वर्डप्रेस व्यवस्थापक को सही रखेगा जहां वह है ... आपके पृष्ठों के शीर्ष पर।

कृपया ध्यान दें कि इसे पूरा करने के लिए कुछ छोटे कदम उठाने होंगे, लेकिन यह इसके लायक है। यह वास्तव में एक जटिल या समय लेने वाली प्रक्रिया नहीं है। मैं सिर्फ यह सुनिश्चित करना चाहता था कि ऐसा करने के बारे में स्पष्टीकरण स्पष्ट और अनुसरण / समझने में आसान था।

चरण 1

get_body_class();अपने विषय के <body>टैग में जोड़ें ।

थीम्स में बॉडी टैग के लिए एक टेम्प्लेट टैग होता है जो थीम लेखकों को सीएसएस के साथ अधिक प्रभावी ढंग से स्टाइल करने में मदद करेगा। टेम्प्लेट टैग कहा जाता है body_class। यह फ़ंक्शन बॉडी एलिमेंट को अलग-अलग क्लासेस देता है और आम तौर पर header.php's HTML बॉडी टैग' में जोड़ा जा सकता है ।

ट्विटर बूटस्ट्रैप निर्देशिका का उपयोग करके अपने वर्तमान में सक्रिय वर्डप्रेस थीम खोलें । header.phpइसे ढूंढे और खोलें।
का पता लगाएं <body> ।
से बदलो <?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>

ऊपर के तीन चरणों को पूरा करने के बाद, आपने अब वर्डप्रेस बॉडी क्लासेस के साथ अपने वर्डप्रेस थीम को सफलतापूर्वक सक्षम किया है।

चरण 2 (वैकल्पिक!)

कस्टम सशर्त सीएसएस कक्षाओं को <body>टैग में जोड़ें।

डिफ़ॉल्ट रूप से, वर्डप्रेस पहले से ही HTML टैग्स के लिए डिफ़ॉल्ट कक्षाओं की एक सूची प्रदान करता है, यदि आप body_class()या get_body_class()कार्यों का उपयोग कर रहे हैं ।

यदि आप अपनी वर्डप्रेस वेबसाइट पर किसी भी प्रदान किए गए फ्रंट-एंड पेज के सोर्स कोड को देखते हैं, तो आप दो सीएसएस वर्गों को स्वचालित रूप से HTML <body>टैग में जोड़े गए "लॉग-इन" और "एडमिन-बार" देखेंगे ।

आप यह भी देखेंगे कि <body>यदि उपयोगकर्ता लॉग इन है, तो सीएसएस वर्ग के नाम केवल HTML टैग में जोड़े जाएंगे, अन्यथा उन्हें HTML <body>टैग में नहीं जोड़ा जाएगा ।

इसलिए यदि आप डिफ़ॉल्ट वर्डप्रेस सीएसएस श्रेणी के नामों का उपयोग नहीं करना चाहते हैं, तो आप अपना स्वयं का बहुत आसानी से जोड़ सकते हैं।

ट्विटर बूटस्ट्रैप निर्देशिका का उपयोग करके अपने वर्तमान में सक्रिय वर्डप्रेस थीम खोलें । functions.phpइसे ढूंढे और खोलें।
add_filter('body_class', 'mbe_body_class');फ़ाइल के शीर्ष पर जोड़ें ।
फ़ाइल के निचले भाग में निम्न कोड जोड़ें ।

कोड:

function mbe_body_class($classes){
    if(is_user_logged_in()){
        $classes[] = 'body-logged-in';
    } else{
        $classes[] = 'body-logged-out';
    }
    return $classes;
}

अब, यदि आप अपनी वर्डप्रेस वेबसाइट पर किसी भी प्रदान किए गए फ्रंट-एंड पेज के सोर्स कोड को देखते हैं, यदि उपयोगकर्ता लॉग इन है, तो आपको HTML <body>टैग में "बॉडी-लॉग-इन" जोड़ा गया है , और यदि उपयोगकर्ता है लॉग आउट, आप देखेंगे कि "बॉडी-लॉग-आउट" को HTML <body>टैग में जोड़ दिया गया है ।

चरण 3

अपनी थीम में सीएसएस कोड जोड़ें।

यह कोड का वह भाग है जो वर्डप्रेस व्यवस्थापक बार, और आपके ट्विटर बूटस्ट्रैप नेविगेशन दोनों को ठीक से प्रदर्शित करने के लिए आपके विषय को सही करेगा, चाहे उपयोगकर्ता आपकी वेबसाइट में लॉग इन हो या लॉग आउट हो।

ट्विटर बूटस्ट्रैप निर्देशिका का उपयोग करके अपने वर्तमान में सक्रिय वर्डप्रेस थीम खोलें । functions.phpइसे ढूंढे और खोलें।
add_action('wp_head', 'mbe_wp_head');फ़ाइल के शीर्ष पर जोड़ें ।
फ़ाइल के निचले भाग में निम्न कोड जोड़ें ।

कोड:

function mbe_wp_head(){
    echo '<style>'.PHP_EOL;
    echo 'body{ padding-top: 70px !important; }'.PHP_EOL;
    // Using custom CSS class name.
    echo 'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    // Using WordPress default CSS class name.
    echo 'body.logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    echo '</style>'.PHP_EOL;
}

कोड के लिए संपादित करें

add_action('wp_head', 'mbe_wp_head');
function mbe_wp_head(){
    echo '<style>'
    .PHP_EOL
    .'body{ padding-top: 70px !important; }'
    .PHP_EOL
    .'body.body-logged-in .navbar-fixed-top{ top: 46px !important; }'
    .PHP_EOL
    .'body.logged-in .navbar-fixed-top{ top: 46px !important; }'
    .PHP_EOL
    .'@media only screen and (min-width: 783px) {'
    .PHP_EOL
    .'body{ padding-top: 70px !important; }'
    .PHP_EOL
    .'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'
    .PHP_EOL
    .'body.logged-in .navbar-fixed-top{ top: 28px !important; }'
    .PHP_EOL
    .'}</style>'
    .PHP_EOL;
}

Mbe_wp_head फ़ंक्शन के इस संस्करण में एक मोबाइल-प्रथम मीडिया क्वेरी शामिल है, यह सुनिश्चित करने के लिए कि आपके हेडर को उचित दूरी से नीचे धकेल दिया गया है। मोबाइल के लिए, WP एडमिन बार 48px लंबा है। 783px ब्रेकपॉइंट के बाद, व्यवस्थापक बार केवल 28px लंबा हो जाता है।

ये लो। यदि उपयोगकर्ता लॉग इन है, तो आपको अब अपने पेज के शीर्ष पर वर्डप्रेस एडमिन बार होना चाहिए, इसके तुरंत बाद आपके ट्विटर बूटस्ट्रैप किए गए नेविगेशन। यदि उपयोगकर्ता आपकी वर्डप्रेस वेबसाइट से लॉग आउट है, तो आपके ट्विटर बूटस्ट्रैप नेविगेशन को अभी भी आपकी वेबसाइट के शीर्ष पर उचित रूप से प्रदर्शित होना चाहिए।

— माइकल Ecklund
स्रोत

1

उदाहरण के लिए, आपने html में इसे डालने के बजाय शैली में css क्यों नहीं डाला? यह अधिक सुरुचिपूर्ण समाधान होगा। आपके काम और विचार के लिए भी धन्यवाद!

— मैक्स रुफ

@MaxRuf तुम बिल्कुल सही हो। अलग enqueued सीएसएस फ़ाइल बेहतर होगा। मैं इस पोस्ट को खोजने वाले लोगों के बारे में सोच रहा था, इसलिए वे आसानी से कॉपी / पेस्ट कर सकते थे। समस्याओं का सामना करने की संभावना कम है।

— माइकल Ecklund

25

मेरे लिए काम नहीं किया, लेकिन मुझे एक अच्छा फिक्स मिला। अपने शीर्ष लेख में। यदि टूलबार प्रदर्शित होता है, तो क्वेरी के लिए वर्डप्रेस फ़ंक्शन का उपयोग करें, और फिर नेवरबार पृष्ठ 2 के नीचे एक खाली div बनाएं।

<div class="navbar navbar-inverse navbar-fixed-top">
<?php 
  // Fix menu overlap
  if ( is_admin_bar_showing() ) echo '<div style="min-height: 32px;"></div>'; 
?>
<div class="navbar-inner">

— Filtah
स्रोत

महान तय। मुझे यह पसंद है कि यह स्वीकृत उत्तर की तुलना में बहुत सरल है और यह दिखता है कि is_admin_bar_showing()नहीं, यदि उपयोगकर्ता लॉग इन है, जो किसी को लॉग इन करने पर विचार करना अच्छा है, लेकिन व्यवस्थापक बार को बंद कर देता है। धन्यवाद!

— मार्क रोमेल

3

WordPress 3.8 के रूप में, व्यवस्थापक बार ऊंचाई 32px है।

— काउगिल

यह एक छोटा सा Hacky है लेकिन मैंने इसे सबसे अच्छा समाधान पाया है। अपवित्र

— plushyObject

तिरछे तर्क और एक इनलाइन शैली का उपयोग करके थोड़ा संशोधित समाधान:<nav class="navbar navbar-default navbar-fixed-top"<?php echo (is_admin_bar_showing()) ? ' style="top: 32px;"' : ''; ?>>

— मार्क रूमेल

1

यह एक मोबाइल डिवाइस को छोड़कर अच्छा है, ऑफ़सेट 32px नहीं बल्कि 46px है। इसके लिए मैंने एक स्टाइल के बजाय CSS क्लास का इस्तेमाल किया। यहाँ कक्षा है जिसे लागू किया जा सकता है:

.fix_wp_overlap {   min-height: 32px; }  @media screen and (max-width: 782px) { .fix_wp_overlap {     top: 46px  !important;   } }

— सर्फ

3

आप यह कोशिश कर सकते हैं:

   .navbar-fixed-top { top: 0px; }
    body.admin-bar .navbar-fixed-top { top: 28px !important; }

यदि वह आपके लिए काम करता है (जो उसे चाहिए!), तो आपको एक प्लग इन फ़ोल्डर या अपने फ़ंक्शन.php फ़ाइल में नीचे दिए गए कोड को चिपकाकर wp admin बार को नीचे ले जाना होगा:

function fb_move_admin_bar() {
    echo '
    <style type="text/css">
    body { 
    margin-top: -28px;
    padding-bottom: 28px;
    }
    body.admin-bar #wphead {
       padding-top: 0;
    }
    body.admin-bar #footer {
       padding-bottom: 28px;
    }
    #wpadminbar {
        top: auto !important;
        bottom: 0;
    }
    #wpadminbar .quicklinks .menupop ul {
        bottom: 28px;
    }
    </style>';
}
// on backend area
add_action( 'admin_head', 'fb_move_admin_bar' );
// on frontend area
add_action( 'wp_head', 'fb_move_admin_bar' );

एक विकल्प के रूप में आप इस प्लगइन का उपयोग कर सकते हैं

मुझे वास्तव में प्लगइन्स का उपयोग करना पसंद नहीं है क्योंकि अधिकांश विषय मेरी स्क्रिप्ट को फर्जी कोड के साथ लोड करते हैं जिनकी मुझे आवश्यकता नहीं है ... समाधान 1 और 2 ऊपर ठीक काम करता है, लेकिन अगर यह आपके लिए काम नहीं करता है, तो आप नीचे दिए गए समाधान 3 की कोशिश कर सकते हैं:

function stick_admin_bar_to_bottom_css() {
echo "

html {
padding-bottom: 28px !important;
}

body.admin-bar {
margin-top: -28px;
}

#wpadminbar {
top: auto !important;
bottom: 0;
}

#wpadminbar .quicklinks .menupop ul {
bottom: 28px;
}

";
}

add_action('admin_head', 'stick_admin_bar_to_bottom_css');
add_action('wp_head', 'stick_admin_bar_to_bottom_css');

लगता है कि मेरे लिए 28px मुद्दों के बिना ठीक काम कर रहा था ..

— तमारा
स्रोत

2

यह मेरे लिए तब तक काम नहीं आया जब तक मैंने इसे बॉडी टैग में नहीं जोड़ा:

<body <?php body_class(); ?>>

फिर यह ठीक काम!

— timhc22
स्रोत

0

उत्तम! बस, जो मैं ढूंढ रहा था, हालाँकि, मैंने कुछ अलग तरीके से कुछ अलग किया था। 3. यकीन नहीं होता कि यह मायने रखता है, लेकिन मेरा कोड इस तरह दिखता है ...

    function mbe_wp_head(){
    echo '<style>'.PHP_EOL;
    echo 'body{ padding-top: 70px !important; }'.PHP_EOL;
    // Using custom CSS class name.
    echo 'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    // Using WordPress default CSS class name.
    echo 'body.logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    echo '</style>'.PHP_EOL;
}
add_action('wp_head', 'mbe_wp_head');

आपने विभिन्न स्थानों में जोड़ने का उल्लेख किया है, लेकिन मैंने हमेशा इसे इस तरह किया है और यह ठीक काम करता है। ठीक करने के लिए धन्यवाद!

— user51355
स्रोत

1

और वास्तव में आपने क्या किया?

— kaiser

0

वर्डप्रेस व्यवस्थापक मेनू के साथ साइट मेनू के ओवरलैपिंग को रोकने के लिए बूटस्ट्रैप 'नवबार-फिक्स्ड-टॉप' के लिए ठीक करें

.admin-bar .navbar-fixed-top { top:46px; @media screen and (min-width:782px) { top:32px; } }

— user49936
स्रोत