Nav bar not sticking at the top

Ashish Sharma-RSi · March 25, 2019

Hi,

I've been working on my website, stumbled on a issue. I want my nav bar to stick at top as a user scrolls down the page. I can't seem to resolve it. A little help will be greatly appreciated.

Code is in the spoiler:-

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portfolio</title>
<link href="css/multiColumnTemplate.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
  <header>
    <div class="primary_header">
      <h1 class="title"> Hello,<br> MY NAME IS <br> Ashish<br> & <br>I'M A UX DESIGNER</h1>
    </div>
	  <div>
    <nav class="secondary_header" id="menu">
      <ul>
		  <li><a class="active" href="#about">ABOUT</a></li>
		  <li><a href="#ux_learning">MY UX LEARNING</a></li>
        <li><a href="#ux_process">UX PROCESS</a></li>
		  <li><a href="#design">DESIGN</a></li>
       
        
        <li><a href="#contact">CONTACT</a></li>
      </ul>
    </nav>
		  </div>
  </header>
  <section id="about">
    <h2 class="noDisplay">Main Content</h2>
    <article class="left_article">
      <h3 align="center">ABOUT</h3>
      <p>Raised in the beauty and calmness of the mountains, I vowed to fight ugly and un-understandable interfaces and battle confusion in websites.</p>
		<p>I love open access to information, video games, reading, learning new things, guitar, technology, football, etc...</p>
		<p>At work, I drive UI requirements from concept to release. I define features, user flows, content and error conditions.</p>
<p>My goal is to ship funny, beautiful experiences.<br><br></p>
		
    </article>
    <aside class="right_article"><h3 align="center">Skills</h3><!-- <img src="images/placeholder.jpg" alt="" width="400" height="200" class="placeholder"/>-->
	  <ul>
		  <li>User Experience</li>
		<li>Information Architecture </li>
		<li>UX Research</li>
		<li>Visual Design</li>
		<li>Code</li>
		  <li>Copy and Content</li>
		</ul></aside>
  </section>
	
	<section>
	<div class="row" id="ux_learning">
    <h3 align="center">MY UX LEARNING</h3>
		<div class="columns">
      
		<p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>
    
		<h4>YOUTUBE</h4>
      <p>My journey basically started on youtube, watching all kinds of videos on UX, whatever I can get. Got interested in it from here. </p>
			</div>
   <div class="columns">
      <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>
      <h4>COURSES</h4>
      <p>Then to learn more, I did online courses on Skillshare, and then moved on Linkin Learning for really getting to it. The Courses on it completely changed my view on things.</p>
	   </div>
  <div class="columns">
      <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>
      <h4>BOOKS</h4>
      <p>To further my progress on UX, I started reading books on UX. Started with Don't make me think, to EVIL by Design, Understanding Color, Design for Hackers, The Design of Everyday things, etc... </p>
    </div>
		
		<br>
		<div class="columns last" align="center">
		   <h5 align="center"><br>After these I now only see UX, nothing else. 
		</h5></div>
		
		<div class="columns">
      <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>
      <h4>FAKE PROJECTING</h4>
      <p>I started doing fake projects to really understand, why some things just works, and some just don't.</p>
		   </div>
		   
		
		<div class="columns">
      <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>
      <h4>PSYCHOLOGY</h4>
      <p>Started getting into PSYCHOLOGY as well, cause it's the only thing that is able to explain all these things.</p>
    </div>
		
		<div class="columns">
      <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>
      <h4>FROM BEST AND WROST DESIGNS</h4>
      <p>Started looking into other Designs, what makes them work, Why people like something, and don't something else, What is the most essential and what can be improved later?; etc...</p>
			</div>
    
		
		<div class="columns last">
      <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>
      <h4>UX IS EVERYTHING</h4>
      <p align="center">Now, There is not a single thing in this planet that can't be improved by UX. And I ready to give my everything to improve anything to make this world a better place.</p>
			</div>
  </div>
	</section>
	
	
	
	
	
	<div class="row" id="ux_process">
    <h3 align="center">MY UX PROCESS</h3>
		<div class="columns">
      
		<p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>
    
		<h4>ANALYZING USER DATA</h4>
      <p>Who are my users? What are their challenges? How can my design solve their needs? This is how I get started.</p>
    </div>
    <div class="columns">
      <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>
      <h4>CREATING PERSONAS</h4>
      <p>Who am I developing for? How will they use my design? Building user personas helps me answer these questions.</p>
    </div>
    <div class="columns">
      <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>
      <h4>PROTOTYPING</h4>
      <p>Prototyping allows me to quickly and inexpensively explore mutliple iterations of designs. Prototypes are great for quickly getting on getting feedback and testing.</p>
    </div>
		<div class="columns">
      <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>
      <h4>IDEATION</h4>
      <p>Ideation helps me for generating a lot of different design ideas form my team to get us going in shortest amount of time as possible. It is the part of the whole process that I love the most.</p>
    </div>
		
		<div class="columns">
      <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>
      <h4>SCENARIOS AND STORYBOARDS</h4>
      <p>Scenarios and storyboards provide a reality check for my designs, helping me identify design gaps and articulate exactly what features I need to build to make users happy. </p>
    </div>
		<div class="columns">
      <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>
      <h4>PAPER PROTOTYPING</h4>
      <p>Paper prototyping is fast and inexpensive, allowing me to test design ideas early as possible.</p>
    </div>
    
		<div class="columns last">
      <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>
      <h4>IMPLEMENTATION PLANNING</h4>
      <p align="center">At last, planning how the design is going to be implemented and put into reality. And then executing the plan.</p>
    </div>
  </div>
		
	
	<div class="row design" id="design">
    <h3 align="center">DESIGN</h3>
		<div class="columns design">
      
		<p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>
    
		<h4>INFORMATION ARCHITECTURE</h4>
      <p>I can do the strange and multidisciplinary work of Information Architect.</p>
    </div>
    <div class="columns design">
      <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>
      <h4>VISUAL DESIGN</h4>
      <p align="center">I can make things pretty, convey a message or emotion.

</p>
    </div>
    <div class="columns design">
      <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>
      <h4>BRAND IDENTITY</h4>
      <p align="center">I can brand stuff.</p>
    </div>
	
		<div class="columns design">
      <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>
      <h4>INTERACTION DESIGN</h4>
      <p align="center">I can describe how things should behave.

</p>
    </div>
  </div>
	
	<!--
  <div class="row blockDisplay">
    <div class="column_half left_half">
      <h2 class="column_title">LEFT COLUMN</h2>
    </div>
    <div class="column_half right_half">
      <h2 class="column_title">RIGHT COLUMN</h2>
    </div>
  </div>-->
  
  <section id="contact">
	<footer class="secondary_header footer">
    <div class="copyright">CONTACT<br>
		
		<div class="social">
			
    <p class="social_icon"><img src="images/download.png" width="10pts" alt="" class="thumbnail"/> ashish.ar212121@gmail.com</p>
    <p class="social_icon"><img src="images/twitter.png" width="80" alt="" class="thumbnail"/>AshishSharmaRSi</p>
    <p class="social_icon"><img src="images/facebook-icon-preview-400x400.png" width="100" alt="" class="thumbnail"/>AshishRSi</p>
    <p class="social_icon"><img src="images/dribbble_02.png" width="100" alt="" class="thumbnail"/>AshishRSi</p>
  </div>
		
		<p> ©2015 - <strong>SIMPLE Theme</strong></p></div>
  </footer></section>
</div>022
</body>
</html>

@charset "UTF-8";
.container {
	background-color: #F2EFE6;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	border-bottom-width: 0px;
	padding-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}
.row {
	width: 100%;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	display: inline-block;
	background-color: #f2efe6;
	color: #182033;
}
.row.blockDisplay {
	display: block;
}
.columns.last {
	width: 100%;
	margin-top: 0px;
	
}
.columns {
	width: 33%;
	float: left;
	font-family: 'Georgia';
	color: #f2efe6;
	line-height: 24px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: justify;
	margin-top: 15px;
	margin-bottom: 15px;
	padding-left: 0px;
	padding-right: 0px;
	margin-left: 0px;
	margin-right: 0px;
}
.row .columns p {
	padding-left: 10%;
	padding-right: 10%;
	color: #182033;
}
.row.design {
	width: 100%;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	display: inline-block;
	background-color: #f2efe6;
}
.row.blockDisplay.design {
	display: block;
}
.column_half.design {
	width: 50%;
	float: left;
	margin-top: 0px;
}
.columns.design {
	width: 25%;
	float: left;
	background-color: #f2efe6;
	font-family: 'Georgia';
	color: #B3B3B3;
	line-height: 24px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: justify;
	margin-top: 15px;
	margin-bottom: 15px;
	padding-left: 0px;
	padding-right: 0px;
	margin-left: 0px;
	margin-right: 0px;
}
.row .columns p {
	padding-left: 10%;
	padding-right: 10%;
}
.container .columns h4 {
	text-align: center;
	color: #182033;
}
.columns.last h5 {
	color: #182033;
}
.primary_header {
	width: 100%;
	background-color: #182033;
	padding-top: 200px;
	padding-bottom: 200px;
	clear: left;
	border-bottom: 2px solid #2C9AB7;
	position: sticky;
}
.secondary_header {
	width: 100%;
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: #182033;
	
}
.secondary_header a {
	color: #f2efe6;
}
.secondary_header ul {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	width: 100%;
	position: sticky;
	top: 0;
}
.secondary_header ul li {
	list-style: none;
	float: left;
	margin-right: 0;
	margin-top: 0px;
	font-family: Georgia;
	font-weight: normal;
	color: #FFFFFF;
	letter-spacing: 1px;
	margin-left: 0;
	margin-bottom: 0;
	text-align: center;
	width: 20%;
	transition: all 0.3s linear;
	position: sticky;
	top: 0;
}
.secondary_header ul li:hover {
	color: #717070;
	cursor: pointer;
	
}
.left_article {
	background-color: #F2EFE6;
	width: 60%;
	float: left;
	font-family: "Source Sans Pro";
	color: #343434;
	padding-bottom: 15px;
}
.center_article {
	width: 100%;
	padding: 3px;
	background:#4B4B4B;
	
}
.container .center_article h3 {
	padding-left: 15%;
	padding-right: 15%;
	color: #717070;
	align-content: center;
	float: none;
	font-weight: bold;
	text-transform: uppercase;
}
.container .center_article p {
	padding-left: 5%;
	padding-right: 5%;
	text-align: justify;
	line-height: 24px;
	margin-top: 30px;
	margin-bottom: 15px;
	color: #B3B3B3;
}
.noDisplay {
	display: none;
}
.container .left_article h3 {
	padding-left: 5%;
	padding-right: 5%;
	margin-top: 5%;
	color: #182033;
	font-weight: bold;
	text-transform: uppercase;
}
.container .left_article p {
	padding-left: 5%;
	padding-right: 5%;
	text-align: justify;
	line-height: 24px;
	margin-top: 30px;
	margin-bottom: 15px;
	color: #182033;
}
.right_article  {
	width: 40%;
	float: right;
	background-color: #F2EFE6;
	margin-top: 0%;
	padding-bottom: 5px;
	
}
.right_article h3 {
	color: #182033;
}
.container .right_article ul {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.right_article ul li {
	font-family: "Source Sans Pro";
	list-style: none;
	text-align: center;
	background-color: #B3B3B3;
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 8px;
	margin-bottom: 10px;
	padding-top: 10px;
	padding-bottom: 11px;
	color: #FFFFFF;
	font-weight: bold;
	border-radius: 0px;
	transition: all 0.3s linear;
	border-left: 5px solid #717070;
}
.right_article ul li:hover {
	background-color: #717070;
	cursor: pointer;
}
.footer {
	background-color: #f2efe6;
}
.title {
	font-weight: bold;
	font-style: normal;
	font-family: "Source Sans Pro";
	text-align: center;
	color: #f2efe6;
	letter-spacing: 2px;
}
.placeholder {
	/* [disabled]max-width: 400px;
*/
	/* [disabled]max-height: 200px;
*/
	width: 100%;
	padding-top: 30px;
	/* [disabled]padding-left: 19px;
*/
	padding-bottom: 30px;
	height: 100%;
}
.left_half {
	background-color: #52BAD5;
}
.container .column_half.left_half h2 {
	color: #FFFFFF;
	font-family: "Source Sans Pro";
	text-align: center;
}
.right_half {
	background-color: #01B2D1;
	color: #FFFFFF;
	font-family: "Source Sans Pro";
	text-align: center;
	font-weight: bold;
}
.column_title {
	padding-top: 25px;
	padding-bottom: 25px;
}
.copyright {
	text-align: center;
	background-color: #f2efe6;
	color: #182033;
	text-transform: uppercase;
	font-weight: lighter;
	letter-spacing: 2px;
	border-top-width: 2px;
	font-family: "Source Sans Pro";
}
.copyright p {
	background-color: #f2efe6;
}
body {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	background-color: #F2EFE6;
}

@media (max-width: 320px) {
.secondary_header ul li {
	float: none;
	margin-top: 28px;
	margin-left: 0px;
	width: 100%;
}
.container .secondary_header ul {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	height: auto;
	width: 100%;
	text-align: center;
}
.secondary_header {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 1px;
	padding-bottom: 40px;
}
.left_article {
	width: 100%;
	height: auto;
}
.right_article {
	width: 100%;
	height: auto;
}
.placeholder {
	width: 100%;
	margin-top: 22PX;
	margin-right: 0px;
	margin-bottom: 22PX;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	max-width: 400px;
	max-height: 200px;
	height: auto;
}
.columns {
	width: 100%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.columns p {
	padding-left: 10px;
	padding-right: 10px;
}
.column_half.left_half {
	width: 100%;
}
.column_half.right_half {
	width: 100%;
}
.copyright {
	padding-top: 25px;
	padding-bottom: 0px;
	margin-bottom: 0px;
}
.container .left_article h3 {
	margin-top: 30px;
}
.social .social_icon img {
	width: 80%;
}
.container .secondary_header {
}
.columns.design {
		width: 100%;
	}	
}

@media (min-width: 321px) and (max-width: 768px) {
.secondary_header ul li {
	float: none;
	margin-top: 28px;
	margin-left: 0px;
	width: 100%;
}
.container .secondary_header ul {
	margin-top: 0px;
	margin-right: 0px;
	overflow: hidden;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	height: auto;
	width: 100%;
	text-align: center;
}
.secondary_header {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 1px;
	padding-bottom: 40px;
}
.left_article {
	width: 100%;
	height: auto;
}
.right_article {
	width: 100%;
	height: auto;
	padding-bottom: 25px;
}
.placeholder {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: 100%;
}
.columns {
	width: 100%;
	margin-top: 6px;
	margin-right: 0px;
	margin-bottom: 6px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.columns p {
	padding-left: 14px;
	padding-right: 14px;
}
.column_half.left_half {
	width: 100%;
}
.column_half.right_half {
	width: 100%;
}


.columns.design
	{
	width: 100%;	
	}
}
@media (min-width: 769px) and (max-width: 1000px) {
.secondary_header {
	overflow: hidden;
	padding-top: 1px;
	padding-bottom: 1px;
}
.secondary_header ul li {
	margin-top: 10px;
	padding: 30px;
	width: 5%;
	margin-right: 4%;
	margin-bottom: 5px;
	margin-left: 3%;
}
.left_article {
	height: auto;
}
.right_article {
	height: auto;
	padding-bottom: 27px;
}
.placeholder {
	width: 100%;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 0px;
	padding-right: 0px;
}
.columns {
	
	float: left;
	line-height: 24px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: justify;
	margin-top: 15px;
	margin-bottom: 15px;
	padding-left: 0px;
	padding-right: 0px;
	margin-left: 0px;
	margin-right: 0px;
}
	
.columns.design
	{
	width: 50%;	
	}
.container .columns p {
	padding-left: 25px;
	padding-right: 25px;
}
.columns.middle {
		width: 100%;
	}	

		
	
}

@media (min-width: 1001px) {
}
.thumbnail {
	width: 100px;
	border-radius: 200px;
	height: 100px;
	margin-left: auto;
}
.thumbnail_align {
	text-align: center;
}
.social {
	text-align: center;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	background-color: #f2efe6;
	clear: both;
	overflow: auto;
}
.social_icon {
	width: 50%;
	text-align: center;
	float: left;
	transition: all 0.3s linear;
	line-height: 0px;
	padding-top: 7px;
	color: #182033;
}
.container .social .social_icon:hover {
	cursor: pointer;
	opacity: 0.5;
}
#menu {
}
.psyc {
}

Thanks,...

Constantin · March 25, 2019

When asking for help with programming issues, please use the code tags to enclose your code so that it is formatted correctly.

It makes things much more easily readable for the people trying to help you, thus improving your chances of actually getting help.

To add code tags, click the <> button on the editor toolbar, then enter your code in the code editor that appears.

LOL NO

Origami Cactus · March 25, 2019

Click this button:

Then you choose the language:

And then you can do cool stuff:

<html>
  <body>
    <p>This is some html</p>
  </body>
  
</html>

Ashish Sharma-RSi · March 27, 2019

On 3/25/2019 at 11:04 PM, Origami Cactus said:
Click this button:

Then you choose the language:

And then you can do cool stuff:
<html>
  <body>
    <p>This is some html</p>
  </body>
  
</html>

On 3/25/2019 at 10:47 PM, Constantin said:

When asking for help with programming issues, please use the code tags to enclose your code so that it is formatted correctly.

It makes things much more easily readable for the people trying to help you, thus improving your chances of actually getting help.

To add code tags, click the <> button on the editor toolbar, then enter your code in the code editor that appears.

LOL NO

Now, Okay?

Joeytyndale · March 29, 2019

Hi Ashish, have you tried this:

#header{
  position:fixed;
  top:0;
  left:0;
}

That should pin it to the top.

Ashish Sharma-RSi · April 8, 2019

On 3/30/2019 at 3:56 AM, Joeytyndale said:
Hi Ashish, have you tried this:
#header{
  position:fixed;
  top:0;
  left:0;
}
That should pin it to the top.

Nope,

And Sorry for very late reply.

elpiop · April 8, 2019

You can do it using javascript,

Add this in your html <head>

<script>
window.onscroll = function() {
				addStickyClass();
			};

function addStickyClass() {
	var offsetHeight = document.getElementsByClassName("primary_header")[0].offsetHeight 

  if (window.pageYOffset > offsetHeight) {
    document.getElementById("menu").classList.add("sticky-header");
  } else {
    document.getElementById("menu").classList.remove("sticky-header");
  }
}
</script>

and this to your .css file


.sticky-header {
	position: fixed;
	top: 0;
}

ZacoAttaco · April 12, 2019

position:fixed;

Is the way I would do this but it doesn't always work. I'd recommend a Chrome extension Code Cola, it lets you edit live web pages and lets you analyse their contents better. It's helped me in the past. If postition:fixed; definitely isn't working, it means there is a property within your code that is conflicting with it.

Sign In

Nav bar not sticking at the top

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Topics

Latest From Linus Tech Tips:

De-Google Your Life - Part 1

Latest From Tech Quickie:

Why Can’t You Buy a “Dumb TV?”

Latest From TechLinked:

Microsoft will see EVERYTHING….

Latest From GameLinked:

What happened to Valve?

Latest From ShortCircuit:

I have been blessed - Moondrop x Crinacle DUSK IEMs

Latest From Mac Address:

Why did you buy an Apple Vision Pro?

Latest From Channel Super Fun:

I Swapped the CEO's Assistant For a Day!