I am having quite a time debugging some CSS on my deployed website. For context: this is my first deployed website. All of my debugging was done with LiveServer locally and had none of these problems. My navbar design uses two navigations with different ordered elements, one for desktop and one for mobile. I use the style #mobile-nav{ display: none;} to intially keep the mobile block hidden, then using a media query #desktop-nav{display: none}; and mobile-nav{ display: block;} to switch them. However I am running into many issues with this in different browsers. First off, on my iphone, the website displays perfectly, you can check yourself because it is live. Secondly, in Chrome, Firefox, or edge the mobile-nav never becomes visible on the query and when inspected in each browser, the style is written as #mobile-nav{display: none !important;} which is not written in the stylesheet anywhere, only shows !important on the live browsers on desktop. Thirdly, in the brave browser, both navbars are visible all the time. I will attach the HTML block with my navbars below, as well as the related styles. Somebody please tell me what I'm doing wrong here.
the URL is dsarmwrestling.com
<nav id="desktop-nav">
<!-- Nav bar element designed to have center logo with links on either side -->
<ul>
<a class="navlink" href="sponsor.html">Sponsor</a>
<a class="navlink" href="rank.html">Rankings</a>
<a href="index.html">
<img id="logo" src="images/BackLogoText1.png" alt="Logo">
</a>
<a class="navlink" href="social.html">Social</a>
<a class="navlink" href="about.html">About</a>
</ul>
</nav>
<nav id="mobile-nav">
<!-- Nav bar element designed to have center logo with links on either side -->
<ul id="nav-wrapper">
<a href="index.html" id="logolink">
<img id="logo" src="images/BackLogoText1.png" alt="Logo">
</a>
<ul id="nested-nav">
<a class="navlink" href="sponsor.html">Sponsor</a>
<a class="navlink" href="rank.html">Rankings</a>
<a class="navlink" href="social.html">Social</a>
<a class="navlink" href="about.html">About</a>
</ul>
</ul>
</nav>
#mobile-nav{
display: none;
}
#media (max-width: 1199.98px){
#desktop-nav{
display: none;
}
#mobile-nav{
display: block;
}
#nav-wrapper{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#logo{
width: 100%;
}
}
on even further inspection, it appears that the styles I have tried in the previous changes are persistent across redeployments. I am using hostinger and I am completely deleting all website files and folders when I make a change and redoing the process of importing a website. Here are images for proof that the hosted css is different than the css found on inspect.
"the styles I have tried in the previous changes are persistent across redeployments" - this looks like a cache issue (your browser doesn't bother downloading the same .css file again and again). Did you try clearing your cache between redeployments?
Related
I basically want to keep the nav with all of its contents at the top of the HTML, but have it moved to the bottom of the page with CSS as I am doing mobile-first approach and want the navigation to appear at the top when I resize it to tablet or laptop. I tried using minus with bottom tag but it takes forever to get it to the bottom and does not seem to be the most efficient way to do it. Is the only way to move the context to the bottom of the page is to put it at the bottom of HTML file or is there a completely different way I should approach this?
This is what I have at the moment:
I want to move the underlined links to the bottom, my code:
#topnavigationmenu li {
display: inline-block;
list-style-type: none;
font-size: 3rem;
padding: 10px;
}
<div id="mainpage">
<nav id="topnavigationmenu">
<ul>
<li> example </li>
<li> example </li>
<li> example </li>
</ul>
</nav>
The easiest solution: You can create two instances of <nav> and show one on mobile and on desktop using media queries.
Possibly better solution: You can use Flexbox (and even CSS Grid I guess) to change the order, so let's say inside the mainpage div you have two sections the nav and a div with your page content:
<nav id="topnavigationmenu">
<ul>
<li> example </li>
<li> example </li>
<li> example </li>
</ul>
</nav>
<div class="page-content">
<!-- Content here -->
</div>
You can add display:flex; to mainpage and manipulate the order these appear on mobile vs desktop/tablet using media queries.
I'd suggest checking these articles out:
Ordering Flex Items
A Complete guide to Flexbox
I'm trying to make my website with Wordpress.
I wanted to add my custom horizontal menu, with plain CSS and HTML since plugins can't satisfy me.
This is my HTML code:
<div id="provamenutop">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
and this is my CSS:
#provamenutop {background-color:#333; width:90%; line-height:100%;}
#provamenutop li {position: relative; float:left; list-style: none; font-family:verdana;}
#provamenutop li a {display:inline-block; text-decoration:none; padding: 20px; color: white; background: #333; transition:.4s;}
#provamenutop li a:hover {background: #111;}
On my local computer, this looks right:
https://gyazo.com/d5b38f6cc1c7857dbe37945e2d8b5002
But here's what it looks like on my website, using a custom theme called Sportexx:
https://gyazo.com/5ccb7e944b627244a7d3ac8344471b28
I know this could be some CSS already existing in the theme interfering with mine, but what could I do to avoid the problem? (The space in between one Home button and the other is also clickable)
Thank you for reading.
When you use Chrome Developer Tools or Firefox Firebug and inspect the HTML, you will see the following output for your menu on the web site http://www.ferrari.co.it/athletic/
<div id="provamenutop">
<ul>
<li>Home</li><a href="#">
</a><li>Home</li><a href="#">
</a><li>Home</li><a href="#">
</a><li>Home</li><a href="#">
</a><li>Home</li><a href="#">
</a></ul><a href="#">
</a>
</div>
So the problem here is not CSS, but faulty HTML. You have two additional <a href...></a> tags. One before the Home and one outside the closing </li> tag and also one outside the closing </ul> tag.
If you fix your HTML, so that it looks like this, it will actually work:
<div id="provamenutop">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
It's definitely a CSS conflicting issue. Do you have a link so we can check it in firebug? Should be a very easy fix. When I run your html and css in JSFiddle it works fine.
I'm not sure what you mean by On my local computer, this looks right:
But here's what it looks like on my website, using a custom theme
called Sportexx:
Are you not using sportexx on your local computer? If it's working without the theme and not working with the theme it's the CSS. Just open up firebug in your browser and look at the css around the menu. You should be able to adjust it right there and remove the problem. Then go to your stylesheet and make the changes accordingly.
After seeing your comment. It's the html. Just delete the other links.
I am using the pagination component in bootstrap, the pagination itself is simple:
<ul class="pagination">
<li class="disabled"><span aria-hidden="true">«</span></li>
<li class="active">1 <span class="sr-only">(current)</span></li>
</ul>
However I want to show the metadata like total pages, total records beside the pagination, and I want the information can be aligned at middle by the pagination control.
And I can not add the page information inside the ul element since it is generated by a third-party library.
I have tried this:
http://plnkr.co/edit/abVwf6rnluYKiOOzXNrt?p=preview
As shown it does not align as expected.
And it seems that I can set the padding or margin for the div.pageinfo or set the height and line-height, but I wonder if this is possible without harding coding
The Problem
There are two main issues to contend with:
One issue blocking you from being able to move your blocks around is that you had the wrapping div with an inline-style of display: inline-block and Bootstrap classes like pull-left which were forcing your elements to display as they were.
The need for IE8 support will make it difficult at best to provide the same experience for your users without a hit to the performance of your site.
Recommendation
The expectation to have websites render identically in IE8 as to their modern counterpart is more or less unreasonable in this day and age. The number of hoops you'll have to jump through to do that is pretty insane. Bootstrap itself is also deprecating IE8 support as of Bootstrap 4. The only way I'd see a reasonable case for this is if there was Google Analytics data to show that a majority of your users are on IE8.
So the best thing you can do is to either (1) recommend that the pagination items are limited to X number so that it fits a certain width and update the fixed width every time something is added, or (2) accept graceful degradation of your site on IE8 in order to provide a better experience for what I am assuming is the majority of your users on modern browsers.
Solution: Modern Browsers
The easiest way to achieve what you want is to utilize flexbox. I've removed any unnecessary class names and included the simplest code sample below (that would primarily work in Chrome). The code with all the prefixes can be found in the demo, but this should get you what you want (minus IE8 and IE9).
Code (Demo)
HTML
<div class="text-center">
<div id="nav">
<div class="pageinfo">Total:xxx 1/xx</div>
<div>
<ul class="pagination">
<li class="disabled">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active">
1 <span class="sr-only">(current)</span>
</li>
</ul>
</div>
</div>
CSS
#nav {
display: flex;
justify-content: center;
align-items: center;
}
.pageinfo {
margin-bottom: 5px;
margin-right: 10px;
}
Update: IE8 Solution
Here is a demo for an IE8 alternative that utilizes blocks in order to achieve the effect. However, while I know that you specifically requested not to hard code the size of the elements, that is not something (to my knowledge) that can be avoided due to the need to support legacy browsers like IE8.
The key thing to understand is that legacy browsers are far less intelligent than their modern counterparts. The only other alternative I can think that you can try is to use JavaScript to determine the width of the element dynamically, but it begins to be a lot of effort and impacts performance as well.
HTML
<div class="text-center">
<div id="nav">
<div class="pageinfo">Total:xxx 1/xx</div>
<div>
<ul class="pagination">
<li class="disabled">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active">
1 <span class="sr-only">(current)</span>
</li>
</ul>
</div>
</div>
</div>
CSS
#nav {
display: block;
width: 200px;
margin: 0 auto;
}
#nav div {
display: block;
}
.pageinfo {
float: left;
margin-right: 10px;
margin-top: 8px;
}
.page-menu {
float: left;
}
.page-menu ul {
margin: 0;
padding: 0;
margin-top: 2px;
}
I hope you are looking for something like below,
/* Styles go here */
.mata-data {
display: inline;
position: absolute;
margin-top: 27px;
margin-left: 25px;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="text-center">
<div>
<div class="mata-data">Total:xxx 1/xx</div>
<div class="container pull-left">
<ul class="pagination">
<li class="disabled"><span aria-hidden="true">«</span></li>
<li class="active">1 <span class="sr-only">(current)</span></li>
</ul>
</div>
</div>
</div>
</body>
</html>
I realize this has probably been answered before, and if so, please direct me to another page.
I have a menu bar that goes horizontally across my page. I have several links and I want spacing so the links will fill the width of the nav.
CSS:
nav {
width:100%;
float:left;
text-align:center;
}
HTML:
<nav id="menu">
<a id="home" href="index.html">Home</a>
<a id="link" href="link.html">Link</a>
<a id="another" href="really.html">Another</a>
<a id="lalala" href="stupidcode.html">Lalala</a>
<a id="oneMore" href="example.html">One More</a>
</nav>
Using display: table-cell on the elements inside nav works.
Fiddle: http://jsfiddle.net/mnmxm2h0/
What I want to achieve here, is to transparent navigation bar hide anything underneath and leave background only. So if you scroll down the page anything that goes under fixed navbar will be hidden. I've googled it but didn't found any satisfying results. Is it even possible?
Here's the demo site: http://klaunfizia.pl/damian/
Style: http://klaunfizia.pl/damian/style.css
what I got now: http://i.imgur.com/6k2yNJbh.jpg
What I want to achieve: http://i.imgur.com/VICvrUDh.jpg
Background image isn't solid, so setting navigation bar color to #ff7400 won't be a solution.
code:
<ul id="menu">
<li>
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
About me
</a>
</li>
<li>
<a href="#">
Portfolio
</a>
</li>
<li>
<a href="#">
Contact
</a>
</li>
</ul>
</nav>
<section id="container">
<section id="main">
<h1>hi! My name is Damian</h1>
<p class="mainText">
I'm a graphic designer from Poland specializing in web design, 3D modeling, vector graphics and digital drawing. See my portfolio for more information.
</p>
</section>
</section>
css:
#navbar
{
height: 80px;
width: 100%;
position: fixed;
-webkit-transform: translateZ(0);
z-index: 10;
top:0;
}
Why can't you set the same background color and image as the body?
#navbar {
background: url(images/background.jpg) #ff7400;
}
Works just dandy in Chrome dev tools.
Assuming that your header/menu container has a solid background color, this looks like a simple z-index issue. Give your menu a higher z-index.
If you could provide more code or a jsfiddle, I could tell you exactly which line of css to add/remove/fix. Unfortunately your site isn't loading.