Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
1 из 2 1 2 »
 
Рейтинг 4.62/13: Рейтинг темы: голосов - 13, средняя оценка - 4.62
0 / 0 / 0
Регистрация: 30.05.2022
Сообщений: 10
1

Как открепить блок (логотип и часть шапки) при скроллинге

30.05.2022, 19:35. Показов 2425. Ответов 20
Метки css, php (Все метки)
Author24 — интернет-сервис помощи студентам
Всем привет.

Есть сайт https://sadovii.ru/.
При прокручивании страниц сайта вниз логотип и кнопки навигации прилипают и накладываются на основной текст сайта в версии для ПК и на мобильных устройствах до самого футера.
Никак не могу найти где это закреплено. В файле header.php этот блок кода есть, но не полный и правка файла ничего не меняет. Прикрепляю скриншоты, header, css и function.php. Буду благодарен за любую помощь.


header.php
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

<?php
/**
 * The header for our theme.
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @package Agencyup
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="yandex-verification" content="b680d7c973334f10" />
 
<!-- партнерка -->
<meta name="verify-admitad" content="5eecd45f57" />
 
<?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
<link rel="pingback" href="<?php echo esc_url(get_bloginfo( 'pingback_url' )); ?>">
<?php endif; ?>
<?php wp_head(); ?>
 
<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
   (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
   m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
 
   ym(88730937, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true,
        webvisor:true,
        ecommerce:"dataLayer"
   });
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/88730937" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
    
<meta name="yandex-verification" content="36dece5046033b08" />
    
<!-- Yandex.RTB -->
<script>window.yaContextCb=window.yaContextCb||[]</script>
<script src="https://yandex.ru/ads/system/context.js" async></script>                                     
</head>
<body <?php body_class(); ?> >
 
<?php wp_body_open(); ?>
<a class="skip-link screen-reader-text" href="#content">
<?php esc_html_e( 'Skip to content', 'financey' ); ?></a>
<div class="wrapper">
 <header class="bs-headwidget">
     <?php do_action('icycp_financey_top_header'); ?>
    <!-- Main Menu Area-->
    <div class="bs-main-nav">
      <nav class="navbar navbar-expand-lg navbar-wp">
          <div class="container mobi-menu"> 
           <!-- Logo image --> 
           <div class="navbar-header col-12"> 
          <?php the_custom_logo(); 
                     if (display_header_text()) : ?>
                        <div class="site-branding-text navbar-brand">
                          <h2 class="site-title"> 
                            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
                            <?php 
                            echo esc_html(get_bloginfo('name'));
                            ?>
                            </a>
                          </h2>
                              <p class="site-description"><?php echo esc_html(bloginfo('description')); ?></p>
                              
                              <a href="tel:+79139357296" style="color: #B50700;">
                                <p style="text-align: center; color: #87D656"><b>звоните</b></p>
                                <b>8 913 935 72 96</b>
                              </a>
                            </div>
                      <?php endif; ?>
            <!-- navbar-toggle --> 
            <!-- /Logo --> 
          <div class="desk-header d-flex pl-3 ml-auto my-2 my-lg-0 position-relative align-items-center">
                <?php $hide_show_nav_menu_btn = get_theme_mod('hide_show_nav_menu_btn','1'); 
                $menu_btn_label = get_theme_mod('menu_btn_label');
                $menu_btn_link = get_theme_mod('menu_btn_link');
                $menu_btn_target = get_theme_mod('menu_btn_target','1');
                if($hide_show_nav_menu_btn == '1') { if($menu_btn_label) { ?>
                <a <?php if($menu_btn_target == '1') { ?> target ="_blank" <?php } ?> href="<?php echo esc_url($menu_btn_link); ?>" class="btn btn-theme"><?php echo esc_html($menu_btn_label); ?></a>
              <?php } } ?>
            <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="close fa fa-times"></span>
              <span class="navbar-toggler-icon"><i class="fas fa-bars"></i></span>
            </button>
            </div>
          </div>
        </div>
        <div class="container desk-menu">  
          <!-- Logo image -->  
           <div class="navbar-header"> 
            <?php the_custom_logo(); 
                  if (display_header_text()) : ?>
                    <div class="site-branding-text navbar-brand">
                      <h2 class="site-title"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
                        <?php 
                            echo esc_html(get_bloginfo('name'));
                          ?></a></h2>
                      <p class="site-description"><?php echo esc_html(bloginfo('description')); ?></p>
                    </div>
            <?php endif; ?>
          </div>
          <!-- /Logo -->
          <!-- /navbar-toggle --> 
          <!-- Navigation -->
           <div class="collapse navbar-collapse">
           <?php wp_nav_menu( array(
                'theme_location' => 'primary',
                'container'  => 'collapse navbar-collapse',
                'menu_class' => 'nav navbar-nav ml-auto',
                'fallback_cb' => 'agencyup_fallback_page_menu',
                'walker' => new agencyup_nav_walker()
              ) ); 
      ?>
          </div>
          <div class="desk-header d-flex pl-3 ml-auto my-2 my-lg-0 position-relative align-items-center">
                <?php $hide_show_nav_menu_btn = get_theme_mod('hide_show_nav_menu_btn','1'); 
                $menu_btn_label = get_theme_mod('menu_btn_label');
                $menu_btn_link = get_theme_mod('menu_btn_link');
                $menu_btn_target = get_theme_mod('menu_btn_target','1');
        if($hide_show_nav_menu_btn == '1') { if($menu_btn_label) { ?>
                <a <?php if($menu_btn_target == '1') { ?> target ="_blank" <?php } ?> href="<?php echo esc_url($menu_btn_link); ?>" class="btn btn-theme"><?php echo esc_html($menu_btn_label); ?></a>
              <?php } } ?>
          </div>
        </div>
      </nav>
    </div>
    <!--/main Menu Area-->    
    </header>
css
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

/*
Theme Name: Financey  
Theme URI: https://themeansar.com/free-themes/financey/ 
Author: themeansar
Author URI: https://themeansar.com
Template: agencyup
Description: Financey WordPress theme ideal for a business or perfect solutions for corporate, consulting, wedding planners, agency, law firms, finance, law travel, recipes, sport/medical shops, startups, online agencies, portfolios, freelancers, E-commerce.  The theme is responsive, WPML, Retina ready, SEO friendly (Live preview : https://demos.themeansar.com/agencyup/transparent/)
Version: 0.4
Tested up to: 5.7
Requires PHP: 7.0
Tags: two-columns, three-columns, left-sidebar, right-sidebar, translation-ready, custom-background, custom-logo, featured-images, footer-widgets, full-width-template, blog, e-commerce, entertainment
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl.html
Text Domain: financey
*/
 
.bs-head-detail .info_widget {
    display: flex;
    font-size: 13px;
}
.bs-head-detail .info_widget i {
    display: inline-flex;
    position: relative;
    margin-right: 5px;
    font-size: 22px;
    margin-top: 4px;
}
.bs-head-detail .info_widget strong {
    display: flex;
    margin-bottom: -5px;
}
.bs-head-detail.two {
    padding-top: 20px;
    padding-bottom: 20px;
}
.bs-head-detail.two .info-right li {
    margin-right: 30px;
}
.bs-head-detail.two .info-right li:last-child {
    margin-right: unset;
}
.bs-head-detail.two::after {
    display: none;
}
.slide-caption {
    background: rgba(0,0,0,0.8);
    padding: 20px;
    border-radius: 0;
}
.btn:hover, .btn:focus {
    text-decoration: underline;
}
 
.bs-breadcrumb-section
{
    box-shadow: unset;
}
 
.post-items ul:not(.post-categories) li a,.post-items ol:not(.post-categories) li a, .post-items table a, strong a, blockquote a, code a, p a, span:not(.author-name):not(.comments-link):not(.posted-on):not(.post-list) a, .navigation.posts-navigation .nav-links a:hover,
.navigation.posts-navigation .nav-links a:hover, #cancel-comment-reply-link, .comment-reply-link {
    text-decoration: underline;
}
 
.site-title a:focus {
    color: #fff;
    outline: 1px dotted #fff;
}
a:focus {
    outline: 1px dotted;
}
.bs-widget ul {
    margin: 0;
}
.bs-sidebar .bs-widget h6 {
    margin-bottom: 15px;
}
function.php
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<?php
/**
 * Theme functions and definitions
 *
 * @package Financey
 */
 
if ( ! function_exists( 'financey_enqueue_styles' ) ) :
 
    /**
     * Load assets.
     *
     * @since 1.0.0
     */
    function financey_enqueue_styles() {
 
        wp_enqueue_style( 'agencyup-style-parent', get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'financey-style', get_stylesheet_directory_uri() . '/style.css', array( 'agencyup-style-parent' ), '1.0' );
        wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.css');
        wp_enqueue_style( 'financey-default-css', get_stylesheet_directory_uri()."/css/colors/default.css" );
        wp_dequeue_style( 'default',get_template_directory_uri() .'/css/colors/default.css');
    }
 
endif;
 
add_action( 'wp_enqueue_scripts', 'financey_enqueue_styles', 99 );
 
 
function financey_customizer_rid_values($wp_customize) {
 
  $wp_customize->remove_section('nav_btn_section');
  $wp_customize->remove_section('hide_show_nav_menu_btn');
  $wp_customize->remove_section('menu_btn_label');
}
 
add_action( 'customize_register', 'financey_customizer_rid_values', 1000 );
 
/*редирект с wp-admin*/
add_action( 'init', 'blockusers_init' );
 function blockusers_init() {
 if ( is_admin() && ! current_user_can( 'administrator' ) &&
 ! ( defined( 'DOING_AJAX' ) && DOING_AJAX ) ) {
 wp_redirect( home_url() );
 exit;
 }
 }
/*редирект с wp-login.php*/
function redirect_login_page() {  
    $page_viewed = basename($_SERVER['REQUEST_URI']);  
  
    if( $page_viewed == "wp-login.php?pass=1" ) {  
        wp_redirect( home_url() );  
        exit;  
    }  
}  
add_action('init','redirect_login_page');
/*редирект после выхода из админ панели*/
function logout_page() {  
    $login_page  = home_url( 'wp-admin' );  
    wp_redirect( $login_page . "?loggedout=true" );  
    exit;  
}  
add_action('wp_logout','logout_page');
 
add_filter( 'woocommerce_background_image_regeneration', '__return_false' );
Миниатюры
Как открепить блок (логотип и часть шапки) при скроллинге   Как открепить блок (логотип и часть шапки) при скроллинге   Как открепить блок (логотип и часть шапки) при скроллинге  

0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 30.05.2022, 19:35
Ответы с готовыми решениями:

Как зафиксировать меню без шапки при скроллинге?
подскажите,как сделать так,чтобы при скроллинге меню закреплялось вверху,но без шапки?

Закрепить часть области окна при скроллинге
Здравствуйте, Пытаюсь Закрепить часть области окна при скроллинге, ну то есть, знаете, как в...

Раскрывающийся блок при скроллинге
Здравствуйте, возникла небольшая проблема. Имеется, к примеру, div в самом верху страницы. При...

Липкий блок. Съезжают кнопки при скроллинге
Сделал липкий блок, не пойму, почему съезжают кнопки. Помогите, пожалуйста, разобраться. Вот сайт:...

20
29 / 26 / 10
Регистрация: 04.03.2013
Сообщений: 853
31.05.2022, 20:08 2
Хотите закрепить шапку, чтобы пролистывалась вместе со страницей?
0
0 / 0 / 0
Регистрация: 30.05.2022
Сообщений: 10
31.05.2022, 20:41  [ТС] 3
Нет. Мне нужно открепить шапку, чтобы она оставалась сверху и не прокручивалась вниз.
0
29 / 26 / 10
Регистрация: 04.03.2013
Сообщений: 853
31.05.2022, 21:10 4
Файл style.css в .navbar-wp:
CSS
1

top: 100px;
Как пример.
Не совсем понял, какой блок хотите закрепить.
У вас их два сверху: синий фон и горизонтальное меню.

Добавлено через 2 минуты
Горизонтальное меню лучше сделать с фоном, а то когда под него контент заезжает, меню становится нечитаемым
1
0 / 0 / 0
Регистрация: 30.05.2022
Сообщений: 10
01.06.2022, 01:03  [ТС] 5
Нужно всё открепить, синий фон остается сверху, а вот логотип и кнопки навигации прилипают к верху и остаются там при прокрутке.

Добавлено через 1 час 23 минуты
Цитата Сообщение от iiwanc Посмотреть сообщение
Файл style.css в .navbar-wp:
CSSВыделить код
1
top: 100px;
Как пример.
Не до конца понял.
В файле style.css так прописать или как?

CSS
1
2
3

.navbar-wp {
top: 100px;
}
0
230 / 170 / 51
Регистрация: 12.03.2021
Сообщений: 971
01.06.2022, 10:14 6
Цитата Сообщение от Climibng Посмотреть сообщение
логотип и кнопки навигации прилипают к верху и остаются там при прокрутке
position: sticky или fixed
1
0 / 0 / 0
Регистрация: 30.05.2022
Сообщений: 10
01.06.2022, 11:02  [ТС] 7
Напишите пожалуйста что конкретно прописать и куда добавить в код, я в этом не силен.
0
230 / 170 / 51
Регистрация: 12.03.2021
Сообщений: 971
01.06.2022, 11:10 8
Цитата Сообщение от Climibng Посмотреть сообщение
Напишите пожалуйста что конкретно прописать и куда добавить в код, я в этом не силен.
кровь из глаз от смеси html и php (который я абсолютно не знаю). для контейнера с логотипом и кнопками, если такого нет - к логотипу и кнопкам в css добавить свойство position: fixed.
1
0 / 0 / 0
Регистрация: 30.05.2022
Сообщений: 10
01.06.2022, 11:23  [ТС] 9
Если бы я знал, где находится этот контейнер, то прописал бы.
0
29 / 26 / 10
Регистрация: 04.03.2013
Сообщений: 853
01.06.2022, 11:26 10
Цитата Сообщение от Splaisto Посмотреть сообщение
добавить свойство position: fixed
В коде появляется. Скорее всего, скрипт работает или в другом файле стилей это прописано.
Нужно отступ сделать нормальный, на мой взгляд.
На скрине top: 67px - это я в консоли отредактировал.
Миниатюры
Как открепить блок (логотип и часть шапки) при скроллинге  
1
29 / 26 / 10
Регистрация: 04.03.2013
Сообщений: 853
01.06.2022, 11:32 11
Climibng, какие скрипты подключены?

Добавлено через 3 минуты
Поищите, где в стилях или в скрипте описывается класс - navbar navbar-expand-lg navbar-wp

Добавлено через 1 минуту
По сути, сейчас у меня ваша шапка нормально работает, но при прокрутке страницы, она убегает немного вверх. Ей бы отступ сверху задать нормальный
1
0 / 0 / 0
Регистрация: 30.05.2022
Сообщений: 10
01.06.2022, 12:49  [ТС] 12
Я изначально прикрепил скриншот, с указанием на эту строку.
В header.php она есть, но без дополнительных значений и настроек.

Цитата Сообщение от Climibng Посмотреть сообщение
<!-- Main Menu Area-->
    <div class="bs-main-nav">
      <nav class="navbar navbar-expand-lg navbar-wp">
          <div class="container mobi-menu">
           <!-- Logo image -->
           <div class="navbar-header col-12">
В файлах function.php и style.css я его не нашел, все эти файлы прикрепил в первом сообщении.
Как в скриптах искать я затрудняюсь ответить.
Миниатюры
Как открепить блок (логотип и часть шапки) при скроллинге  
0
29 / 26 / 10
Регистрация: 04.03.2013
Сообщений: 853
01.06.2022, 14:52 13
В header.php у вас просто разметка.
Другие файлы со стилями есть? Там посмотрите.
Ну и можете скрипты прикрепить. Без дополнительных данных не найдем причину

Добавлено через 5 минут
Интересны скрипты с идентификаторами: financey-style и agencyup-style-parent
1
0 / 0 / 0
Регистрация: 30.05.2022
Сообщений: 10
01.06.2022, 15:18  [ТС] 14
Файл agencyup style.css

https://codepen.io/Nikitacode/... itors=0110

Добавлено через 5 минут
Цитата Сообщение от iiwanc Посмотреть сообщение
Ну и можете скрипты прикрепить. Без дополнительных данных не найдем причину
Я с радостью, только где их найти.
0
7 / 3 / 4
Регистрация: 27.04.2021
Сообщений: 7
01.06.2022, 15:36 15
Лучший ответ Сообщение было отмечено Climibng как решение

Решение

На сайте используется тема Agencyup. В оригинальной версии темы липкого меню, как будто бы, нет. Попробуйте просто обновить тему. Перед этим необходимо сделать бэкап.
1
29 / 26 / 10
Регистрация: 04.03.2013
Сообщений: 853
01.06.2022, 18:42 16
В папке CSS скорее всего у вас есть файл bootstrap.css
Покажите его.
И вам правильно сказали выше. Можно обновиться
1
0 / 0 / 0
Регистрация: 30.05.2022
Сообщений: 10
01.06.2022, 18:59  [ТС] 17
bootstrap.css
https://codepen.io/Nikitacode/... itors=0110

На счет обновиться не совсем понял.
0
29 / 26 / 10
Регистрация: 04.03.2013
Сообщений: 853
01.06.2022, 19:00 18
У вас сайт на движке Вордпрес.
Тема называется Agencyup. Так вот тему можно обновить, чтобы баги ушли. Но перед обновлением сделайте бэкап, чтобы при необходимости можно было вернуться назад
1
0 / 0 / 0
Регистрация: 30.05.2022
Сообщений: 10
01.06.2022, 19:30  [ТС] 19
Может я что-то не понимаю. Но как обновить тему, если у неё нет доступных обновлений.
Миниатюры
Как открепить блок (логотип и часть шапки) при скроллинге   Как открепить блок (логотип и часть шапки) при скроллинге  
0
7 / 3 / 4
Регистрация: 27.04.2021
Сообщений: 7
02.06.2022, 18:44 20
Лучший ответ Сообщение было отмечено Climibng как решение

Решение

Цитата Сообщение от Climibng Посмотреть сообщение
как обновить тему, если у неё нет доступных обновлений
Сделайте бэкап сайта. В каталоге wp-content/themes удалите каталоги agencyup и financey. Скачайте с официального сайта оригинальные версии тем agencyup, financey. Распакуйте архивы в каталог wp-content/themes.
1
02.06.2022, 18:44
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 02.06.2022, 18:44
Помогаю со студенческими работами здесь

Блок контента, который расширяется при скроллинге старице
Нужно реализовать скрипт для сайта, при котором блок с основным контентом (#maincont) расширяется,...

Изменение фона шапки сайта (слайдер) при сохранении структуры шапки
Добрый вечер, уважаемые форумчане. Подскажите пожалуйста юному падавану. Пытаюсь разместить в...

Как закрепить логотип (блок) в верхний слой презентации
Существует такая проблема: есть шаблон презентации. в нем есть логотип, который стоит в левом...

ListView: сбивается содержимое ImageView элемента при скроллинге + как сделать выделение пункта списка при нажатии?
1. Есть свой класс ContactsSimpleCursorAdapter, в методе public void bindView(View view, Context...

Как зафиксировать кнопку при скроллинге
Всем привет! Посоветуйте, как можно зафиксировать элемент управления при скроллинге? Задача...

Автозаполнение из шапки в табличную часть
Здравствуйте, я столкнулась с такой проблемой.. у меня в реквизитах шапки есть поле Дата1 и создана...

Автоподгрузка контента при скроллинге, как в Инстаграм
Доброго времени суток господа. Значит есть галерея из 300 изображений, нужно чтобы на странице...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
1 из 2 1 2 »
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru