i'm having a headache with this problem and i don't know where it's coming from
Basically i'm making this site, ok, everything is working fine until you try it on mobile, it's incredibly small. I've worked using the same methods in other site and this didn't hapenned at all, i didn't had to use meta or any media query, and it's still only a nav menu. So i'm using ul with class row and li with the col-sm-12 and col-md-4 so it works like desired.
That's the pc view
That's the mobile view
All the sizes are in rem and em. The itens are supposed to stack when mobile, and it did, but everything it's super small
The demo:
https://jsfiddle.net/nnhfqL2L/2/
body {
margin: 0;
padding: 0;
border: 0;
background-color: #666;
font-family: 'Roboto', Verdana, Tahoma, sans-serif;
}
/*Header*/
/*Nav*/
nav {
border-bottom: 4px solid #888;
}
nav ul {
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
background-color: #fff;
text-align: center;
font-size: 1.5rem;
}
nav ul li {
display: inline-block;
}
nav ul li a,a:hover {
text-decoration: none;
color: #000;
}
nav ul li section {
padding: 0.8em;
}
nav ul li .menuStrap {
background-color: #000;
height: 3px;
margin: 0 auto;
width: 0;
transition: width 0.2s;
transition-timing-function: ease-out;
}
nav ul li a:hover .menuStrap {
width: 100%;
}
<header>
<nav>
<ul class="row">
<li class="col-sm-12 col-md-3">
<a href="#">
<section>Winpad ★</section>
<div class="menuStrap"></div>
</a>
</li>
<li class="col-sm-12 col-md-3">
<a href="#">
<section>Produtos</section>
<div class="menuStrap"></div>
</a>
</li>
<li class="col-sm-12 col-md-3">
<a href="#">
<section>Sobre</section>
<div class="menuStrap"></div>
</a>
</li>
<li class="col-sm-12 col-md-3">
<a href="#">
<section>Contato</section>
<div class="menuStrap"></div>
</a>
</li>
</ul>
</nav>
</header>
Put this in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
By the way, it is better practice to manually resize your browser window to the wanted size, you can download extensions/plugins for browser to resize your browser window or display current window size.
That is view port issue:
change your view port meta tag to:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimum-scale=1"/>
Try this in <head> part:
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no" />
or in media query you can use different font sizes for small resolutions..
#media(min-width:480px){html{font-size: 90%}}
Related
I have a navigation bar, and I was wondering if it is possible to change the hover size in bootstrap 4? I want to make the size of the background on the menu links smaller. I have tried this method: How do i change the width of the hover in bs4 , but it does not work for me.
This is my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Cuppela</title>
<script src="https://www.cuppela.com/cuppela/js/jquery.min.js" type="text/javascript"></script>
<script src="https://www.cuppela.com/cuppela/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://www.cuppela.com/cuppela/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/test.css" type="text/css">
</head>
<body>
<div id="nav-menu">
<nav id="main-nav" class="navbar navbar-expand-md fixed-top">
<div class="container">
<ul class="nav navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container-fluid" id="top-main">
<div id="top_text">
<h1>Cuppela Made With Sugar</h1>
<p>Delicious Homemade Cakes</p>
</div>
</div>
</div>
<div>
<h2>Test</h2>
</div>
</body>
</html>
This is my css:
body{
margin: 0px;
}
li a:hover {
background-color: #ff9900;
border-radius: 10px;
}
li a{
color: white !important;
}
#top-main{
background-image: url(../images/cake_six_two.jpg);
height: 100vh;
}
#nav-menu{
font-size: x-large;
position: relative;
}
#top_text{
color: white;
text-align: center;
position: relative;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
h1{
font-size: 500%;
}
p{
font-size: x-large;
}
h2{
text-align: center;
}
Edit: Added more description.
I suppose you want to change the size of the background on the menu links when you :hover over them. If that is the case, edit the padding of .nav-link (or remove the padding line completely) and you will end up with something like this:
As you can see no padding at all will give the impression of a bit more orange background above the links than below. This is a common quirk with padding in CSS, so I recommend you add for example padding: 0 0 .2rem which translates into zero padding on the top, right and left, and 0.2rem padding at the bottom of the element.
Result will then be:
You didn't clearly mention what you want, but if you want to change the font size, you can simply do font-size: 12px or any pixels you want. If you want to change the anchor tag's width, then you can decrease the padding like
.navbar .navbar-nav .nav-item .nav-link { padding: 5px // or anything you want, you can also make it 0 }
I need help with my horizontal nav-bar that is at the top of my webpage.I am using a CSS animation to make my nav-button's font-size increase on focus and hover. I only want my nav-bar to move when nav-items are focused or hovered. My only problem is that the content beneath the nav-bar moves down when my nav-button is focused or hovered. I only need help with making the content beneath my nav-bar unaffected by the growing font-size of my focused or hovered nav-buttons.
/*NAVBAR CSS STARTS HERE*/
nav {
margin-left: 15%;
}
.navbar {
list-style: none;
padding: 0px;
overflow: hidden;
display: inline;
text-align: center;
}
.navbar li{
display: inline;
}
.nav-link a {
margin-left: 1%;
padding: 14px 30px;
text-decoration: none;
background-color: rgba(0, 0, 0, 0.548);
font-size: 20px;
color: rgb(255, 255, 255);
border-radius: 5px;
font-weight: bold;
letter-spacing: 5px;
}
.nav-link a:hover, .nav-link a:focus {
animation: grow 0.5s;
animation-fill-mode: forwards;
}
/*nav-bar css ends here*/
Here's the HTML below for one of the webpages on my website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta name="author" content="Maurice Rogers">
<title>My Short Bio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="backgroundImg">
<header id="page-top">
<h1><span>Maurice Rogers</span></h1>
<nav>
<ul class="navbar">
<li class="nav-link"><a class="nav-link"
href="index.html">Bio</a></li>
<li class="nav-link"><a class="nav-link" href="technical-
resume.html">Technical Resume</a></li>
<li class="nav-link"><a class="nav-link" href="my-
animations.html">Animations</a></li>
<li class="nav-link"><a class="nav-link" href="me-
surfing.html">Surfing</a></li>
</ul>
</nav>
</header>
<main>
<br/>
<h2><span>My Bio</span></h2>
<br/>
<div class="box">
<p>I love to code. I find it to be very fun, interesting, and
rewarding. You can <a href="technical-resume.html"
accesskey="t">find my Technical Resume here</a>. I also have other
cool interests. I've spent many hours making animations. You can
<a href="my-animations.html" accesskey="a">view my animations
here</a>. I've been surfing all my life. It really is one of my
favorite things to do. You can <a href="me-surfing.html"
accesskey="s">see me surfing here</a>.</p>
</div>
</main>
<footer>
<nav>
<a class="ftr-nav-link" href="index.html">Back to top</a>
</nav>
<h4 class="copy-right">© 2021 Maurice Rogers</h4>
</footer>
</div>
</body>
</html>
You could try putting a position: absolute on your ul tag and start from there.
I had to modify your code to get the desired result. I used transform: scale() to increase the font-size without affecting the buttons. Apparently if you use display: inline then scale() will not work so I changed around your code and use flexbox properties. Also there were a few issues with your html, you declared the class nav-link on both your a and li, so I removed the class from a. Hope this works for you.
/*NAVBAR CSS STARTS HERE*/
nav {
margin-left: 15%;
}
.navbar {
list-style: none;
padding: 0px;
overflow: hidden;
display: flex;
text-align: center;
}
.nav-link {
margin-left: 1%;
padding: 14px 30px;
text-decoration: none;
background-color: rgba(0, 0, 0, 0.548);
font-size: 20px;
color: rgb(255, 255, 255);
border-radius: 5px;
font-weight: bold;
letter-spacing: 5px;
transition: transform .5s;
}
.nav-link a {
display: block;
color: white;
text-decoration: none;
}
.nav-link a:hover{
transform: scale(1.2);
}
/*nav-bar css ends here*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta name="author" content="Maurice Rogers">
<title>My Short Bio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="backgroundImg">
<header id="page-top">
<h1><span>Maurice Rogers</span></h1>
<nav>
<ul class="navbar">
<li class="nav-link">Bio</li>
<li class="nav-link"><a href="technical-
resume.html">Technical Resume</a></li>
<li class="nav-link"><a href="my-
animations.html">Animations</a></li>
<li class="nav-link"><a href="me-
surfing.html">Surfing</a></li>
</ul>
</nav>
</header>
<main>
<br/>
<h2><span>My Bio</span></h2>
<br/>
<div class="box">
<p>I love to code. I find it to be very fun, interesting, and
rewarding. You can <a href="technical-resume.html"
accesskey="t">find my Technical Resume here</a>. I also have other
cool interests. I've spent many hours making animations. You can
<a href="my-animations.html" accesskey="a">view my animations
here</a>. I've been surfing all my life. It really is one of my
favorite things to do. You can <a href="me-surfing.html"
accesskey="s">see me surfing here</a>.</p>
</div>
</main>
<footer>
<nav>
<a class="ftr-nav-link" href="index.html">Back to top</a>
</nav>
<h4 class="copy-right">© 2021 Maurice Rogers</h4>
</footer>
</div>
</body>
</html>
I am trying to style a web page using css. For some reason my header does not spread over where the header should be, which means the width is not 100%. it looks like this now this is the screenshot
header {
width: 100%;
}
#logo_picture {
margin-left: 80px;
}
#logo img,
#logo nav {
float: left;
}
#logo nav {
line-height: 120px;
margin-left: 250px;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline;
}
nav a {
color: black;
font-size: 20px;
font-family: 'Arsenal', 'sans-serif';
font-weight: 300;
padding: 2px 38px;
text-decoration: none;
}
nav a,
nav a:visited {
color: black;
}
nav a.selected,
nav a:hover {
color: grey;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Larry Rosenburg Official Website</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Anton|Crimson+Text:400,700,700i|Rakkas" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cherry+Swash|Cinzel|Gentium+Basic|Muli" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arsenal" rel="stylesheet">
</head>
<body>
<header>
<div id="logo">
<img src="lincoln.jpg" width="30%" alt="Lincoln logo" id="logo_picture">
<nav>
<ul>
<li> Home
</li>
<li> Lincoln
</li>
<li> About
</li>
<li> Contact
</li>
</ul>
</nav>
</div>
</header>
<h1> Larry Rosenburg </h1>
<p>
I believe that as important as skills and experiences are in our professional careers, it is the relationships that we create which allow us to truly succeed. My company provides title insurance, settlement, escrow and exchange services on a level that
is second to none, but my focus is helping your succeed with your commercial and residential transactions. As a person who can deliver a full range of solutions, I am able to leverage the power of my company with my drive to be concerned with your
company.
</p>
<div id="profile-pic">
<img src="picture.jpg" width="35%" alt="">
</div>
</body>
<footer>
</footer>
</html>
After every float you must create a clear class. Try adding in the CSS:
.clearfix {
clear: both;
}
in the html after the </header> add <div class="clearfix">
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have seen a navigation like this, and I absolutely love it.
How would I go about by having this navigation, I currently have a template of a horizontal navigation which I use now, however no matter how much tweaking I do, it isn't coming close this design.
I also like where the logo is placed, Can you help me tweak my code?
body {
font-family: 'Catamaran', sans-serif;
margin: 0 !important;
padding: 0 !important;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
padding-right: 50px;
background-color: #f3f3f3;
}
li {
float: right;
}
li a {
display: block;
color: #666;
padding: 60px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #f3f3f3;
color: #cc293f;
}
li a.active {
color: #cc293f;
background-color: #f3f3f3;
}
<html>
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href='https://fonts.googleapis.com/css?family=Catamaran:600' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<title>Sharpturn Network v2</title>
<header>
</header>
<ul>
<img src="imgur.com/S17TggX">
<li><a class="active" href="#home">Upload</a>
</li>
<li>Support
</li>
<li>FAQs
</li>
<li>Home
</li>
</ul>
</body>
</html>
This involves using float. The solution would look something like this:
nav {
background: black;
height: 60px;
width: 100%;
}
#left-nav {
float: left;
color: white;
}
#right-nav {
float: right;
}
#faqs {
color: green;
}
ul {
list-style-type: none;
}
li {
display: inline;
padding-right: 20px;
line-height: 20px;
top: -10px;
text-transform: uppercase;
}
a {
color: white;
text-decoration: none;
}
<nav>
<div id='left-nav'>
<img src='http://lorempixel.com/image_output/technics-q-g-60-40-3.jpg' alt='my image' />HYIP Templates
</div>
<div id='right-nav'>
<ul>
<li><a href='uploads.html'>Upload</a>
</li>
<li><a href='support.html'>Support</a>
</li>
<li id='faqs'><a href='faqs.html'>FAQs</a>
</li>
<li><a href='contact.html'>Contact</a>
</li>
</ul>
</div>
</nav>
As you can see above, instead of using divs for navigation, we can use the HTML5 semantic nav tag. We break it down into sections, one which will be the left side and the other the right. We assign each of these divs a float property.
In order to provide a background color to the nav element, we have to specify a height and width property.
By default li elements are block elements. To display them on the same line and remove line breaks, we set the display property to inline. In order to vertically center these list elements, we will use both the line-height and top properties.
An easier solution would be to use bootstrap's navbar classes.
We can replicate the black navbar with the .navbar-inverse class. We can replicate the left nav and right nav respectively with the .nav-pull-left and .nav-pull-right classes as well.
I am trying to make a template for my webpage. I am creating a header and a footer, and have the content in between. But for some reason, I cant get any of it to work. I have been fooling with this for hours and cant find answers.
I have a logo, I am trying to position it inside the that way it looks clean. But I cant. I wont stay centered on my navigation text! I then notice when I resize my browser, it shifts all my navigation links until they all fit on the screen. How do I fix that?
Upon looking around for the fix, I noticed that I should instead convert all my position: absolute; top: (so many px) left: (so many px); to percent style measurements..no such luck. Once I get this working, I should be pretty much over the hardest part.
here is the css file:
//this is not in the div tag rather a test logo outside.
#logo{
display: inline;
float: left;
}
.nav{
display: inline;
float: left;
width: 5;
border: 1px solid #C0C0C0;
margin: auto;
text-align: center;
}
.nav ul{
list-style-type: none;
}
.nav li{
display: inline;
}
.nav li img{
height: 30px;
}
.nav a{
text-decoration: none;
padding: 20px 5px 20px 20px;
font-weight: 900;
color: #C0C0C0;
font-family: monospace;
font-size: 20px;
display: inline;
}
.nav a:visited{
color: #C0C0C0;
}
.nav a:hover{
color: black;
}
here is the html
</head>
<meta charset="UTF-8">
<meta name="description" content="This is a website that offers free information on IT">
<body>
<!--
Creating the navigation bar. I used nav as the dic class name with an unordered list
-->
<img src="Images/logo.png">
<div class="nav">
<ul>
<li><img src="Images/logo.png"></li>
<li> Home</li>
<li>Contact</li>
<li>Service</li>
<li>About</li>
</ul>
</div>
<div class="ad">
<center>
<img src="Images/head_pic.jpg">
<center>
</div>``
adding
min-width: (whatever);
fixed most of my issues.