• Hello WP community!

    I’m very new to web coding so I’m having quite small problems but with my abilities I’m nowhere close to solving out. Please spare a second give me a hand on how to get make the element below sticky with the plugin called Sticky Menu (or Anything!) on Scroll.

    Okay. My website is bucadagroup.com. Say, I’d like to make the logo on top sticky. As you can see in the source, its class name is vc_single_image-img attachment-large. As well as you are to see on this screenshot here, I have selected the corect classname but still it won’t work anyhow.

    I believe I have tried everything I can but no success, so please help.

    Thank you in advance,

    Mikey.

    P.S: I’ve spent days and nights just to add a sticky navbar. I’m using Visual Composer and its extensions, however that shiny thing doesn’t give you an easy way to create a sticky menu so instead, I shall depend on your generous help.

Viewing 7 replies - 1 through 7 (of 7 total)
  • I’m not exactly sure how this plugin works, but looking at your source code, it appears that the logo is housed inside the div with class="wpb_rapper".

    Try putting .wpb_rapper into the box (note the preceding dot to indicate that it’s a class rather than an id.

    If that doesn’t work, you might try asking in the plugin’s support forum:
    https://www.ads-software.com/support/plugin/sticky-menu-or-anything-on-scroll

    It says “Choose one element” – but you are using two?

    1: vc_single_image-img 2: attachment-large

    Can you give the logo its own CSS ID, then use that?

    *

    Alternatively – I think you have done a really good job with the design anyway! I would not actually worry about making the logo float, I think it looks great as it is right now ??

    Good luck!

    Sorry @llizard I had not seen your post as I started writing, it sounds like what you said would work.

    Thread Starter salatainc

    (@salatainc)

    Right. First of all thank you both @llizard and @colin McDermott for your suggestions. It’s so motivating to hear that the design is beautiful, Colin! ?? I can say I pondered more on design than coding. I wish I had a WP expert partner who could do the coding for my designs :/ That’d be better than awesome.

    I created a post on the plugin’s support forum but no answers came from there.

    First I tried putting .wpb_wrapper into the box and it didn’t work. Then I tried putting vc_single_image-img, didn’t work again. After that I placed a dot before vc_single_image-img and surprisingly it partly worked, partly didn’t. You can see the result here. The logo is sticky but it glides under into the 60% transparent black backgrounds of text columns below, which is not the exact thing I’d love my visitors to see.

    What I’m actually trying to do is, sticking the row that has the id navvbar (having home, construction, management and media texts on it) to ceiling of the page so that it would serve as a sticky navigation menu. So when I put .navvbar into the box, all I get is an entirely black and corrupted page and that’s definitely not a good result.

    It seems the plugin won’t help. Is there anything you can suggest me to create a sticky menu on this page?

    Thanks again.

    Even though you are making so many changes to the styles by using plugins, I think that if I were you, I would be inclined to create a child theme to get the navvbar to be fixed.

    To create your child, your css file must start with something like this. The “template” part is essential.

    /*
     Theme Name:     your theme name
     Theme URI:      your website
     Description:    child theme of twentythirteen
     Author:         you and/or WP:twentythirteen
     Author URI:     optional website address
     Version:        1.0.0
     Template:       twentythirteen
    */

    Note that the name beside “Template” must be exact. If you activate your child theme, you’ll see a note that the parent is twentythirteen.

    Also, create a functions.php file (open a text editor like notepad) and copy and paste the following into it:

    <?php
    
    /*...............
    replace import of parent's style on style.css
    ...............*/
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'child-style',
            get_stylesheet_directory_uri() . '/style.css',
            array('parent-style')
        );
    }
    
    ?>

    Make sure there are zero spaces or line breaks before the first <?php and the last ?>.

    Save the file as functions.php and put it in your theme’s folder.

    Most cosmetic changes can be made in the css…. Consult the parent css file to find the ids and classes. You only have to change the ids or classes that you want changed (ie: you don’t have to include the whole of the parent css file)

    Now, in your child css file, below “Template: twentythirteen”, put the following (I’m not absolutely positive that this will work because of all the plugins you have installed)

    #navvbar {
    position:fixed;
    top: 2px; /* this number can be changed*/
    }

    The 2px is just an arbitrary number that I threw in to make sure it worked on the test version of a vague mockup of your page I made.

    For more on this, please see the following:
    https://cssreset.com/creating-fixed-headers-with-css/
    https://www.w3schools.com/css/css_positioning.asp

    These are also very useful:
    https://www.wpbeginner.com/beginners-guide/wordpress-child-theme-pros-cons/
    https://www.wpbeginner.com/glossary/parent-theme/
    https://codex.www.ads-software.com/Child_Themes

    Thread Starter salatainc

    (@salatainc)

    Thank you for your efforts @llizard.

    I have done everything exactly as you you suggested. Watched the video and did what he points out, too. None of them worked. I think the plugins might have spoiled the style.css file so I believe there’s no way I can create a fixed header other than using completely another theme that brings fixed headers by itself.

    Yes, because you have so many style plugins installed, it was really difficult to discover which plugin was creating which id or class.

    Personally, I’d be a bit wary of using plugins for this. And it’s only because plugins can sometimes become unsupported over time so that they suddenly stop working. (This has happened to me on a couple of occasions.)

    If I were you, I’d be inclined to put the styles into your child’s style sheet directly, rather than have the plugin do it. I’m not positive, but it could well be that your site will load faster if it only has to look at one stylesheet (or two if it’s a parent/child situation) rather than several.

    That way, your divs could have only one class rather than several.

    I hope that made sense!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘No matter what, couldn't make it work :(’ is closed to new replies.