Sak Sak - 1 month ago 5x
ASP.NET (C#) Question

Unordered List loads slowly, causes it to align vertical for 1-2 seconds after which aligns horizontal?

I saw this post Navigation Menu CSS loads slowly, causes it to align vertically for a few seconds?
Tried it but it didn't help.

Using it in project.
Site.Master code:

.body {
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;

.navbar {
margin-bottom: 0;
background-color: black;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 2px;
border-radius: 0;
font-family: Montserrat, sans-serif;

.navbar li a, .navbar .navbar-brand {
color: black !important;

.navbar-nav li a:hover, .navbar-nav a {
color: #fff !important;
background-color: #fbb534 !important;

.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
<body data-target=".navbar">
<nav class="navbar navbar-default" style="margin-bottom: 0px; clear: none; background-color: white; border-color: white;">
<div class="container" style="margin-left: 0px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<img src="../../Images/Logo.png" width="130" height="40" style="margin-right: 40px;" />
<div class="collapse navbar-collapse" id="myNavbar" >
<ul class="nav navbar-nav navbar-left">
<li style="padding-left: inherit"><a id="A1" runat="server" href="~/Admin" title="Admin">ADMIN</a></li>
<li style="padding-left: inherit"><a id="A2" runat="server" href="~/Configuration" title="Configuration">CONFIGURATION</a></li>
<li style="padding-left: inherit"><a id="A3" runat="server" href="~/Reports" title="Reports">REPORTS</a></li>
<li style="padding-left: inherit"><a id="A4" runat="server" href="~/Upload" title="Upload">UPLOAD</a></li>
<li style="padding-left: inherit"><a id="A5" runat="server" href="~/Billing" title="Billing">BILLING</a></li>


enter image description here

after 1-2 seconds:

enter image description here

----------------------EDIT STARTS HERE-----------------------

Note: Bootstrap css were not used, extremely sorry for that.
Plain css and html in site.master page are used.

Ok, So I finally, kind of, found the issue myself.

Trials: Tried all the suggestions provided in the answers, Thank you all for that but they didn't help.

Issue: I created an empty aspx page with no content in it and loaded it with master page. What I see is below:

enter image description here

On the other hand when the page with some content loads it sets the navbar correctly like this, looks like when the Admin page loads it is empty for 1-2 seconds and when it renders it sets the correct style:

enter image description here

So what I did is I put below code to make it less ugly :(

display: inline;

which now will show up like :
enter image description here

Any other suggestions guys ?


Your code is missing the part where you include Bootstrap, and that is the main point. Your navbar is styled by Bootstrap, so it won't be styled until the Bootstrap's CSS file is loaded. Put the Bootstrap CSS in the <head> part of your page in a <link> element.

<link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

This is your code without bootstrap: and this is your code with the Bootstrap's CSS file in the <head> section:

You are using class names from Bootstrap (navbar navbar-default). As you don't have any CSS code to make the navbar inline, when you finally get the expected result that means that something else gets loaded: that's Bootstrap.

I think you are loading something in the page using Ajax, and the content that is loaded contains bootstrap's CSS. That's why you don't know that you are using it, and why it is loaded some time after the page rendering.