what is with the nav bar items moving

Discussion Of All Legal Topics Is Fine Anything Goes. Be Respectful of Others. No Personal Information or Attacks.
All Traffic, Link, Banner, Push Notification and Advertising, Offers & Requests Here,.
Domains & Websites For Sale and Requests Here.
Keep One thread per person & No More Than 1 Weekly Bump.
Zug
Banned
Banned
Posts: 418
Joined: February 11th, 2023, 9:19 am
Referrals: 4

#31

Post by Zug » September 16th, 2023, 7:13 pm

I can tell you right now, that this line

Code: Select all

<div class="navbar" role="navigation">
is conflicting with the bootstrap navbar code. That code is where your phpbb navigation begins.

It says div class="navbar"

The bootstrap navbar uses the same class. Which is why you need a custom css file to redefine the navbar classes that you see here:

Code: Select all

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-lg">
<h2 class="navbar-brand float-md-start mb-3 text-center"><a href="https://www.sponsorchat.com/index.php" class="blink text-white fst-italic fw-bold fs-5">SponsorChat.com</a></h2>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse float-md-end fs-6" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item"><a class="nav-link" href="viewforum.php?f=202">Premier Listings</a></li>
<li class="nav-item"><a class="nav-link" href="viewforum.php?f=74">Main Chat</a></li>
<li class="nav-item"><a class="nav-link" href="directory/">Business Directory</a></li>
<li class="nav-item"><a class="nav-link" href="viewforum.php?f=233">Announcements</a></li>
<li class="nav-item"><a class="nav-link" href="viewforum.php?f=208">Websites & Domains</a></li>
<li class="nav-item"><a class="nav-link" href="viewforum.php?f=167">Traffic Sponsors & Offers</a></li>
<li class="nav-item"><a class="nav-link" href="viewforum.php?f=225">Employment</a></li>
</ul>
</div>
</div>
</nav>
Problem solved.




Zug
Banned
Banned
Posts: 418
Joined: February 11th, 2023, 9:19 am
Referrals: 4

#32

Post by Zug » September 16th, 2023, 7:19 pm

Edit this line in the navbar code:

Code: Select all

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
change it to this:

Code: Select all

<nav class="topnavbar navbar-expand-md navbar-dark fixed-top bg-dark">
It will break your navbar but the phpbb navigation area should show as it should. It's a test.




Zug
Banned
Banned
Posts: 418
Joined: February 11th, 2023, 9:19 am
Referrals: 4

#33

Post by Zug » September 16th, 2023, 7:32 pm





Zug
Banned
Banned
Posts: 418
Joined: February 11th, 2023, 9:19 am
Referrals: 4

#34

Post by Zug » September 17th, 2023, 3:38 pm

Check this page out .. it has navigation with a banner .. https://www.phpbb.com/community/viewtopic.php?t=1852085 .. just need to put the navbar on top of the banner.




Zug
Banned
Banned
Posts: 418
Joined: February 11th, 2023, 9:19 am
Referrals: 4

#35

Post by Zug » September 18th, 2023, 1:42 am

Hmmmmm ... what a challenge this is since I am now looking at phpbb code. It's not impossible though. phpbb only uses the navbar class a couple times. Should be able to change it out with some modifications.




User avatar
HeidiHoe
Verified Member
Verified Member
Posts: 1653
Joined: February 3rd, 2018, 12:20 pm
Title: Resident Genius

#36

Post by HeidiHoe » September 18th, 2023, 6:12 am

Zug wrote: ↑
September 18th, 2023, 1:42 am
Hmmmmm ... what a challenge this is since I am now looking at phpbb code. It's not impossible though. phpbb only uses the navbar class a couple times. Should be able to change it out with some modifications.
Why not just lift the code necessary for the navbar from bootstrap and instead of linking the entire bootstrap css place the lifted code into a custom css file and link that. You could then easily rename the class thus avoiding the conflict instead of fucking around with the phpbb css. Keep it simple.

And while you're at it, fix the break points so the menu looks decent across all devices and screen sizes.

Why are you hell bend on using bootstrap?
The Fourth Turning Is Here

Zug
Banned
Banned
Posts: 418
Joined: February 11th, 2023, 9:19 am
Referrals: 4

#37

Post by Zug » September 18th, 2023, 3:06 pm

HeidiHoe wrote: ↑
September 18th, 2023, 6:12 am
Zug wrote: ↑
September 18th, 2023, 1:42 am
Hmmmmm ... what a challenge this is since I am now looking at phpbb code. It's not impossible though. phpbb only uses the navbar class a couple times. Should be able to change it out with some modifications.
Why not just lift the code necessary for the navbar from bootstrap and instead of linking the entire bootstrap css place the lifted code into a custom css file and link that. You could then easily rename the class thus avoiding the conflict instead of fucking around with the phpbb css. Keep it simple.

And while you're at it, fix the break points so the menu looks decent across all devices and screen sizes.

Why are you hell bend on using bootstrap?
It's easier to mess with one or two classes in phpbb css files than it is to mess with bootstraps css. You can't just pull what you need from bootstraps compiled css.

If I can get phpbb to work correctly while still having bootstrap loaded in the background, that can lead to many other possibilities in phpbb's page templates.

I, myself, prefer working with bootstrap rather than coding css from scratch and making pages responsive, from scratch.

From what I can tell, the prosilver theme css only uses 'navbar' in a couple places. It wouldn't be hard to locate them and switch them out to a different class title. the 'navbar' class in phpbb is only used in the upper navigation area of the forum and the lower area of the forum where that is where the forums navigation areas are located.

phpbb css files and template files a re a big cluster fuck of a lot of shit, lol. There area LOT of files to edit to create your own theme.

Heidi, if you have a simpler solution using your method, then please post the code here. It would be appreciated. Thanks.




what is with the nav bar items moving

Post Reply