Page Attribute Template Content Only Erases Menu

I’m trying to achieve a full-width webpage, I’ve tried different themes but haven’t been able to achieve what I want. What I’ve now done is put the theme “Blossom Fashion” and gone from there, though I’m still not happy with it.

I customized my theme in ‘Homepage Settings’ so there is no slider, and so that it loads a static page not my most recent blog posts.

Since I wanted the images on the static page to be full width, on that page itself I chose settings “Template: Content Only”, but when I do this, the navigation menu disappears, the footer is gone, etc. If I choose “Template Default” or “Boldgrid-Full Width” the menu comes back, but it’s not actually full width – there is still white space on the side of the page.

To get a menu I added a plugin, but it’s just added a basic dropdown menu that looks ugly. I don’t want that, I want the same menu like what shows if I go into a post or category page.

Can you please help me achieve this without paying anything extra for more themes? Is there a way to get full width images without losing the menu, footer, etc?

To get the full page width images I am using this code (there’s some extra divs etc in there that are unused). I would like to change the opacity of the box behind the text and make it 50% opacity. Can you please let me know how? Is there a way with coding I can get the full-width effect without losing the menu? I use HTML not WYSIWYG.

<div class="color-neutral-background-color color-neutral-text-contrast bg-background-color tmpl-call_to_action-8 boldgrid-section dynamic-gridblock background-scroll" style="background-position: 50% 50%; background-size: cover; background-image: url('https://www.thefashionfold.com/wp-content/uploads/2024/01/FEATURED-IMAGE-PITTI.jpg');" data-bg-overlaycolor="rgba(255, 255, 255, 0.8)" data-image-url="https://www.thefashionfold.com/wp-content/uploads/2024/01/FEATURED-IMAGE-PITTI.jpg">
<div class="container">
<div class="row" style="padding-top: 275px;">
<div class="col-md-6 col-sm-6 col-xs-12 col-lg-6">
<h1 class="">&nbsp;</h1>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 col-lg-6"></div>
</div>
<div class="row" style="padding-top: 25px; padding-bottom: 200px;">
<div class="col-md-12 col-sm-12 col-xs-12 col-lg-12" style="padding: 1em;"></div>
</div>
<div class="row" style="padding: 20px;">
<div class="col-md-12 col-xs-12 col-sm-12 col-lg-12 has-hover-bg hover-bg-22 bg-background-color color5-background-color color-5-text-contrast" data-hover-bg-class="hover-bg-22" data-hover-bg-color="rgb(215, 204, 200)">
<div class="row color-neutral-text-contrast color-neutral-background-color" style="padding-top: 25px; padding-bottom: 25px;">
<div class="col-md-12 col-sm-12 col-xs-12 col-lg-12">
<div>
<p class="" style="font-size: 1.5em; text-align: center; line-height: 1em;"><strong><a href="https://www.thefashionfold.com/pitti-immagine-uomo-105-starts-tomorrow-the-what-the-who-and-the-street-style/">Pitti Immagine Uomo #105 Starts Tomorrow – the What, the Who, and the Street Style</a></strong></p>

</div>
</div>
</div>
</div>
</div>
</div>
</div>

Thanks.