what is with the nav bar items moving

[3ric]

It is real annoying how the nav bar items move when I log in here and switch from page to page.Who fucked that up,let me take a guess the name starts with. D... Fix it will you. The login used to be on the right what happened there.

[TheButcher]

No clue who you are referring to but if I knew how to remedy those two things i would have. It works just ignore the little dance,I am sure it has to do with the Bootstrap code we added for the upper navbar and being responsive, just a wild uneducated guess.

[BrasSmonkey]

It is real annoying how the nav bar items move when I log in here and switch from page to page.Who fucked that up,let me take a guess the name starts with. D... Fix it will you. The login used to be on the right what happened there.

called a topbar

[Zug]

called a topbar

No, It's called a Navbar .. read here: https://getbootstrap.com/docs/5.0/components/navbar/
Maybe wp calls it a topbar but this is not wp.

[BrasSmonkey]

called a topbar

No, It's called a Navbar .. read here: https://getbootstrap.com/docs/5.0/components/navbar/
Maybe wp calls it a topbar but this is not wp.

fuck you and that wp bashing shit read: https://m2.material.io/develop/web/supporting/tab-bar knuckle draggin mutherfucker tab bar

[GlennfromLA]

It is called a navbar no reason to get all worked up brassman

[Zug]

called a topbar

No, It's called a Navbar .. read here: https://getbootstrap.com/docs/5.0/components/navbar/
Maybe wp calls it a topbar but this is not wp.

fuck you and that wp bashing shit read: https://m2.material.io/develop/web/supporting/tab-bar knuckle draggin mutherfucker tab bar

It is called a navbar no reason to get all worked up brassman

Calm down monkey business, in bootstrap it is called a navbar and that is what this site is using.

[BrasSmonkey]

No, It's called a Navbar .. read here: https://getbootstrap.com/docs/5.0/components/navbar/
Maybe wp calls it a topbar but this is not wp.

fuck you and that wp bashing shit read: https://m2.material.io/develop/web/supporting/tab-bar knuckle draggin mutherfucker tab bar

It is called a navbar no reason to get all worked up brassman

Calm down monkey business, in bootstrap it is called a navbar and that is what this site is using.

[HeidiHoe]

I don't give a shit what you call it. What I do know is that you need to fix the break points. If you look at the menu on mobile in landscape or on a tablet it looks like shit. Adjust your break points in the css, maybe add some, or shorten the text on the links. Whatever.

Also, why are there 2 down arrows next to the mchat and user menu instead of one? Fix that shit. It looks bad.

[Zug]

I don't give a shit what you call it. What I do know is that you need to fix the break points. If you look at the menu on mobile in landscape or on a tablet it looks like shit. Adjust your break points in the css, maybe add some, or shorten the text on the links. Whatever.

Also, why are there 2 down arrows next to the mchat and user menu instead of one? Fix that shit. It looks bad.

Yeah, I tried to tell him he needs a custom.css file to define some of the navbar stuff. While this is phpbb, I am not sure how or what he would need to do to adjust that.

DARKMODE:

Code: Select all

<link rel="stylesheet" href="/assets/bs/502/css/bootstrap.min.css">
<link defer href="./assets/css/font-awesome.min.css?assets_version=2560" rel="stylesheet">
<link defer href="./styles/sponsorchat-black/theme/stylesheet.css?assets_version=2560" rel="stylesheet">
<link defer href="./styles/sponsorchat-black/theme/en/stylesheet.css?assets_version=2560" rel="stylesheet">


	<link defer href="./assets/cookieconsent/cookieconsent.min.css?assets_version=2560" rel="stylesheet">

<!--[if lte IE 9]>
	<link defer href="./styles/sponsorchat-black/theme/tweaks.css?assets_version=2560" rel="stylesheet">
<![endif]-->

	
<link href="./ext/dmzx/mchat/styles/prosilver/theme/mchat.css?assets_version=2560" rel="stylesheet" media="screen" />
<link href="./ext/dmzx/referral/styles/all/theme/referral.css?assets_version=2560" rel="stylesheet" media="screen" />
<link href="./ext/senky/massnotification/styles/all/theme/massnotification.css?assets_version=2560" rel="stylesheet" media="screen" />
<link href="./ext/tatiana5/popuppm/styles/all/theme/popuppm.css?assets_version=2560" rel="stylesheet" media="screen" />
<link href="./ext/vse/abbc3/styles/all/theme/abbc3_common.min.css?assets_version=2560" rel="stylesheet" media="screen" />
<link href="./ext/vse/scrolltotop/styles/all/theme/scrolltotop.css?assets_version=2560" rel="stylesheet" media="screen" />

Maybe try moving this line to the bottom to start figuring it out? Since each line of css that is called runs in order from top to bottom. If there is something that conflicts with other css then it will break something. Core Bootstrap CSS =

Code: Select all

<link rel="stylesheet" href="/assets/bs/502/css/bootstrap.min.css">

Also the width of the navbar should be adjust to match the width of the board. The length of each text item sorta matters. You don't center a navbar.

[Zug]

This is how I do it. But phpbb has so many css files.

Code: Select all

<head>
<link rel="stylesheet" href="<?php echo $BOOTSTRAP_CORE_CSS;?>"> // path to bootstrap core file
<link rel="stylesheet" href="<?php echo $CUSTOM_CSS;?>"> // path to custom css

<body>
<?php include "/path/to/navbar/code/NAVBAR-DARKMODE.htm";?>
<?php include "/path/to/navbar/code/NAVBAR-DEFAULT.htm";?>

Navbar code:

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>

Bootstrap Navbar Docs: https://getbootstrap.com/docs/5.0/components/navbar/

[HeidiHoe]

I don't give a shit what you call it. What I do know is that you need to fix the break points. If you look at the menu on mobile in landscape or on a tablet it looks like shit. Adjust your break points in the css, maybe add some, or shorten the text on the links. Whatever.

Also, why are there 2 down arrows next to the mchat and user menu instead of one? Fix that shit. It looks bad.

Yeah, I tried to tell him he needs a custom.css file to define some of the navbar stuff. While this is phpbb, I am not sure how or what he would need to do to adjust that.

DARKMODE:

Code: Select all

<link rel="stylesheet" href="/assets/bs/502/css/bootstrap.min.css">
<link defer href="./assets/css/font-awesome.min.css?assets_version=2560" rel="stylesheet">
<link defer href="./styles/sponsorchat-black/theme/stylesheet.css?assets_version=2560" rel="stylesheet">
<link defer href="./styles/sponsorchat-black/theme/en/stylesheet.css?assets_version=2560" rel="stylesheet">


	<link defer href="./assets/cookieconsent/cookieconsent.min.css?assets_version=2560" rel="stylesheet">

<!--[if lte IE 9]>
	<link defer href="./styles/sponsorchat-black/theme/tweaks.css?assets_version=2560" rel="stylesheet">
<![endif]-->

	
<link href="./ext/dmzx/mchat/styles/prosilver/theme/mchat.css?assets_version=2560" rel="stylesheet" media="screen" />
<link href="./ext/dmzx/referral/styles/all/theme/referral.css?assets_version=2560" rel="stylesheet" media="screen" />
<link href="./ext/senky/massnotification/styles/all/theme/massnotification.css?assets_version=2560" rel="stylesheet" media="screen" />
<link href="./ext/tatiana5/popuppm/styles/all/theme/popuppm.css?assets_version=2560" rel="stylesheet" media="screen" />
<link href="./ext/vse/abbc3/styles/all/theme/abbc3_common.min.css?assets_version=2560" rel="stylesheet" media="screen" />
<link href="./ext/vse/scrolltotop/styles/all/theme/scrolltotop.css?assets_version=2560" rel="stylesheet" media="screen" />

Maybe try moving this line to the bottom to start figuring it out? Since each line of css that is called runs in order from top to bottom. If there is something that conflicts with other css then it will break something. Core Bootstrap CSS =

Code: Select all

<link rel="stylesheet" href="/assets/bs/502/css/bootstrap.min.css">

Also the width of the navbar should be adjust to match the width of the board. The length of each text item sorta matters. You don't center a navbar.

Hell, I have no intention to dig into all the Bootstrap crap. Is the navbar the only reason that you added Bootstrap? To do a top navbar only takes a view lines of code and css. It's not really that complicated. Perhaps adding a bunch of code that isn't used just slows things down for no reason. Use @media in the css to establish the break points. You can use as many as you need to make it look right across devices and screen sizes.

[TheButcher]

I don't give a shit what you call it. What I do know is that you need to fix the break points. If you look at the menu on mobile in landscape or on a tablet it looks like shit. Adjust your break points in the css, maybe add some, or shorten the text on the links. Whatever.

Also, why are there 2 down arrows next to the mchat and user menu instead of one? Fix that shit. It looks bad.

When it comes to code I am totally useless. The arrows are because of the permission levels of users compared to admins.

I see the admin login panel there. let me post the screen shot what I see.

[Zug]

Hell, I have no intention to dig into all the Bootstrap crap. Is the navbar the only reason that you added Bootstrap? To do a top navbar only takes a view lines of code and css. It's not really that complicated. Perhaps adding a bunch of code that isn't used just slows things down for no reason. Use @media in the css to establish the break points. You can use as many as you need to make it look right across devices and screen sizes.

Bootstrap has all that in there by default. He is using the bootstrap core css file. One purpose of using a custom.css file is to over-ride its defaults among other things to style it to match your site.

Obviously there is a conflict somewhere with css definitions between phpbb css and bootstrp core css.

[HeidiHoe]

I don't give a shit what you call it. What I do know is that you need to fix the break points. If you look at the menu on mobile in landscape or on a tablet it looks like shit. Adjust your break points in the css, maybe add some, or shorten the text on the links. Whatever.

Also, why are there 2 down arrows next to the mchat and user menu instead of one? Fix that shit. It looks bad.

When it comes to code I am totally useless. The arrows are because of the permission levels of users compared to admins.

I see the admin login panel there. let me post the screen shot what I see.

Yep, 2 arrows. I'm not familiar with this platform but I'm guessing you're not supposed to have 2 showing. Did you do mods in that area what might have caused that?