Same menu on all my pages - how to?

Bootstrap Studio Help
1

Hi I'm new to Bootstrap Studio and trying to figure out how to convert my manuel created design to BSS design. Today I have an index.html with a menu and I then use a small JS script to open the different pages and display them in the content section of my index page (You can see js below). What I want to do with BSS is the same :-) As I see it, I have to include my menu on all my html pages to do that? Nothing wrong with that but the flickering when hole screen is reloaded is anoying!

JS: $('a').click(function(e){ e.preventDefault(); $("#content").load($(this).attr('href')); closeNav(); });

2

First try making sure that your body's background color is the same as your contents background color. That might help with the appearance of a white flash effect. Similar to the answer found here https://stackoverflow.com/questions/13122769/how-to-browse-between-pages-without-screen-flickering#13123127

You can also try using your script to target a specific section of your site rather than the entire document.

$(function(){
    $("a").click(function(e){
        e.preventDefault();
        $("#content").load("'"+$(this).attr("href")+" #inner-content"+"'");
        closeNav();
    });
});

I believe that's the correct way, haven't tested it.

You'll need to have the direct descendant wrapper of your #content element to be an element with the ID of inner-content or something else to your desire

For example

<div id="content">
    <div id="inner-content">
        Content ...
    </div>
</div>

OR

<body id="content">
    <div id="inner-content">
        Content ...
    </div>
</body>

Something along those lines anyways.

Saj