Setting up header and hamburger nav

  • Resolved jimmyygee

    (@jimmyygee)


    1 year, 1 month ago

    I’m very new to bootstrap, I honestly am quite lost.

    I’m looking to add a hamburger nav + offcanvas menu to my site header.
    Heres the example:
    https://getbootstrap.com/docs/5.2/examples/navbars-offcanvas/

    I added plugin and enabled everything, but am quite lost on what i’m supposed to do next. Is there any guides on actually using the tools other then the docs?

    I’m using a WordPress theme with an older version of Bootstrap, which is 3. But the theme doesn’t use it much so it only breaks the header, making it take up half the page, which I expected. The theme has 3 header options using a Option Tree, so I was assuming you just add the bootstrap code to one of the 3 header files and enable this plugin.

    Another dev made a sample page, which uses bootstrap and the exact header/hamburger/offcanvas, but its a template page manually added to the theme file, not global. So client wants me to replicate this nav setup globally:

    https://v15pr74m1jr.c.updraftclone.com/

    How could I achieve this?

    The theme originally being used is Medicom WP.

    • This topic was modified 1 year, 1 month ago by jimmyygee.
    • This topic was modified 1 year, 1 month ago by jimmyygee.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter jimmyygee

    (@jimmyygee)

    Here is a good example of what we are looking for the global part:

    View post on imgur.com

    Our theme has nav_walker in it, but i’m totally lost on what to do. I replaced the current header file being used with Bootstrap5 code for a hamburger menu, and it lacks the spacing and just doesn’t look right or act right at all.

    I assume I need padding or something, but just dont know how to do that within All Bootstrap Blocks.

    Hopefully this info and content can explain the goal here!

    Plugin Author Miles

    (@areoimiles)

    Hi @jimmyygee

    Sorry to hear you’re having issues.

    Does the theme you are using make use of the WordPress site editor eg: are you creating your pages / layouts with blocks? If the answer to this is no, then this plugin isn’t right for you as it has been built specifically to create blocks within WordPress’ block editor. If this is the case it sounds like you need to:

    • Uninstall this plugin as it isn’t right for your project
    • Download the latest version of Bootstrap (CSS and JS) – https://getbootstrap.com/docs/5.1/getting-started/download/
    • Update your theme to use the above versions (it’s most likely including Bootstrap somewhere in your functions.php file so replace that with the new versions)
    • Then your code should start to work how you’re expecting

    Please note, if the theme has been created on an older version of Bootstrap then doing the above could break other areas of the sites layout so be careful.

    Another option may be to create the offcanvas functionality yourself and leave the existing Bootstrap version as is. There’s a few examples on how you could achieve this with CSS and jQuery here https://freefrontend.com/jquery-off-canvas-menus/

    If I misunderstood and you are using blocks to create your site, please let me know and I can provide you with the block code that you need to get started.

    Thanks
    Miles

    Thread Starter jimmyygee

    (@jimmyygee)

    So this plugin works with block based themes only?

    I’ll try whats mentioned!

    Thread Starter jimmyygee

    (@jimmyygee)

    Sorry, one more quesion, if I was to convert the theme to block theme, would it work then?

    I am Bootstrap 3, currently, and am just trying to figure out the best option here haha.

    Plugin Author Miles

    (@areoimiles)

    Hi @jimmyygee

    Yes this plugin is specifically for block themes. I don’t think it would be as simple as converting the theme to a block theme as this would require you to build out the whole site again using blocks which could be very time consuming and you would most likely lose all of the features of the theme.

    It sounds to me like your best option would be to build the offcanvas menu yourself without worrying about Bootstrap. There’s a simple example of how you could do that here https://codepen.io/ammit/pen/emBwmm with jQuery and CSS.

    It also may be worth speaking to the theme author as they can probably offer you better guidance on the best option as the problem you’re having is with the theme.

    I’m going to mark this ticket as resolved as at the moment there’s not much I can do to help. But, if you use All Bootstrap Blocks on your block themes in future please don’t hesitate to get back in touch if you need any assistance.

    I’m sorry I couldn’t be more help and I hope you manage to resolve your issue!

    Thanks

    Miles

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Setting up header and hamburger nav’ is closed to new replies.