Hello all I'm trying to add a logo to my navigation bar using HTML and CSS I have managed to get an image loaded on to my nav bar but it is way to big as seen in the picture.
<div class="nav">
<div class="container">
<ul class="pull-left">
<img src="images/test.png">
<li>Home</li>
<li>How to</li>
</ul>
<ul class="pull-right">
<li>Sign Up</li>
<li>Log In</li>
<li>Help</li>
</ul>
<div class="clear"></div>
</div>
</div>
Well, there are several options.
First is to resize your image with any of editors like Photoshop and others.
Second is to set your image width and height via css:
.pull-left img {
display: block;
width: 30px; /* here put your width */
height: 30px; /* here put your height */
}
But if your logo image not going to scale to it's initial size according to your design and media queries, you should take the first approach. It will reduce file size as well.
Related
here is a link to my repo
trevormolano.bitbucket.io
I need to create
I am having issues trying to create the banner. How do I re-size it so it extends to the whole page? I tried using background-image for CSS as well, but it doesn't work well at all. It showed up as a sliver on the top. I have been messing around trying to get it to work, but here it what I have so far:
<header>
<!-- // Logo / Banner -->
<img src="images/cycleWorld.png" alt="CycleWorld Logo" id="logo">
<div id="bannerbox">
<img src="images/banner.jpg" id="banner"/>
</div>
<!-- Logo / Banner // -->
<nav>
<!-- // Navigation Bar -->
<ul>
<li>Home </li>
<li>Shop </li>
<li>Club Events </li>
<li>Blog </li>
<li>Contact </li>
<li>My Cart </li>
</ul>
<!-- Navigation Bar // -->
</nav>
</header>
But I want to not have the image on the HTML, I want to add it with CSS.
Remove the image form the HTML and refactor the #bannerbox in your css:
#bannerbox {
display: grid;
height: 100%;
max-height: 100%;
max-width: 100%;
min-height: 60vh;
/* ^^ set this to the desire height in whatever unit px, etc. */
background-image: url(../images/banner.jpg);
/* ^^ check the path to the image, depends how you are serving your site*/
background-size: cover;
background-repeat: no-repeat;
}
Remember you are calling the background-image from your css not your html and since the image location is images/banner.jpg and your css is css/home.css when calling from the css you will need to go up a folder and then inside the images folder. But once online you can directly call background-image: url(/images/banner.jpg); because the / is the root of your site.
I don't even know where to start on this one. When I resize below 1600px the site breaks 100% even though it has media queries in place to resize/hide/move elements. But to pinpoint one issue that eludes me, I have a logo in an id that is set to a height of 175px and width to auto. At any browser size it's always a height of 564px. Check out some code below:
img #fpa-logo {
bottom: -25px;
height: 175px;
margin-left: 12.5%;
position: absolute;
width: auto;
}
<div class="row">
<div class="col-sm-12 nav" id="nav-w-back">
<div class="col-sm-5 fLeft">
<img src="../images/FPA-logo-new150-02.png" alt="FPA Logo" id="fpa-logo">
</div>
<div class="col-sm-7">
<ul class="nav fRight" id="nav-ul">
<li>Home</li>
<li>Services<span style="font-size: .75em"> ▼</span>
<ul>
<li>Personalized Care</li>
<li>Health Care Services</li>
</ul>
</li>
<li>Links<span style="font-size: .75em"> ▼</span>
<ul>
<li>Patient Information and Forms</li>
<li>Patient Friendly Sites</li>
</ul>
</li>
<li>Staff Bios</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
If you're interested in more code - the test site is: http://fpacny.com/index_test.php where you can play with the sizing etc. At this point you would likely notice that the main image background only resizes properly when an inline HTML style addition of:
style="height: auto; width: 100%;"
is added. Otherwise, that breaks too.
Why won't my linked CSS override this? I've never had this issue on any website I've developed and it is driving me absolutely nuts!
JSFiddle: https://jsfiddle.net/hjo8pLxe/
You need to write
img#fpa-logo
to target the logo.
Edit: Just saw you are using bootstrap 4: Why not use the "img-fluid" class on the image? Then it won't get too big and scale down automatically if the row/column gets smaller.
<img class="img-fluid" {...} >
Or do you need any special behaviour, other than automatic resizing?
And you should also look more into the column features of bootstrap, you are using a lot of position: absolute in your css which is not needed at all for your design and would prevent a lot of errors if you would use bootstrap instead.
Change your ccs to
img#fpa-logo {
bottom: -25px;
height: 175px;
margin-left: 12.5%;
position: absolute;
width: auto;
}
I have been working on a website recently that needs to have a header with the 4 menu items, and then the menu as the final header that expands for the 4 menu items. I'm attempting to make it so that when you have a device that won't fit the 4 menu items, it won't show them and will only show the menu.
HTML:
<!-- Header -->
<header id="header">
<div class="logo"><span>Placeholder</span></div>
About
Clients
Team
Contact
Menu
</header>
<!-- Nav -->
<nav id="menu">
<ul class="links">
<li>Home</li>
<li>About</li>
<li>Clients</li>
<li>Contact
</ul>
</nav>
CSS:
#media screen and (max-width: 730px) {
a.optional {
display:none;
}
}
As you can see, I have tried using classes to select the specific links, but it doesn't work as intended. Thanks in advance for the help!
JSFiddle: https://jsfiddle.net/4c3cgeqx/
I have a navigation that worked fine when i didn't use any custom bottom border on the nav links, but trying to adding them and still have the functionality as before does my head in. I just want to vertical align the nav items with 50px height and a custom border on the menu links, but keep it functional when in mobile size and de border in mobile view is replaced with a normal underline declaration.
This what i had before adding a custom bottom border and it works:
--> Fiddle before
And this is what happens when adding a custom bottom border when in mobile size the menu items don't vertical align and the background doesn't go down with them:
--> Fiddle after
<header>
<nav>
<div class="mobile-nav">
<div class="nav-toggle"><i class="nav-icon"></i></div>
</div>
<ul class="left-nav">
<li class="home">Pixelation</li>
</ul>
<ul class="right-nav">
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
My website has some serious issues when you resize it to the medium and small views. It looks great at full screen and mobile view but has some serious issues in the browser when you shrink it down to medium and below. I've used foundation but also mixed in some non-foundation code that I think is causing some issues, such as the container. I also suspect there is something wrong with the top nav bar, because that looks off at shrunk views as well. There is a lot of code to look at but i will post some snippets here as well as link to the main site so you can look through the full code.
Here is some of the top bar and also I have a container which is not part of the grid which might be throwing things off, as well as a weird header element that I coded some css for and if removed throws it off as well. Basically, my code is a bit of a mess, and I will be cleaning it up best I can once I figure out what is causing a lot of this mess up when the browser is resized. (ps. to see the rest of the code and css, please visit www.omegadesignla.com and inspect element, or ask me to paste a specific part, thanks! )
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<span><img class="logo" src="img/primarylogo.png"><span>
</li>
<li class="toggle-topbar menu-icon">
Menu
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>About us</li>
<li>Contact us</li>
<li class="has-dropdown">
Services
<ul class="dropdown">
<li>Print Media</li>
<li>Web Development</li>
<li>Promotional Items</li>
<!-- <li class="active">Active link in dropdown</li> -->
</ul>
</li>
</ul>
</section>
</nav>
<div class="container">
<header>
<div class="row">
<div class="large-3 medium-3 small-6 small-centered columns"> <!-- large centered -->
<a id="topbutton" href="#" class="button large radius button">Take the tour!</a>
</div>
</header>
From debugging your site with firebug i see that the logo in the left top corner is a png with 720px width. Although you have class .logo width: 40% it makes the .title-area 720px width which breaks the layout.
try following additions to css:
.title-area {
max-width: 40%; //or whatever you need for your layout. px will work there, too
}
.title-area .logo {
width: 100%;
height: auto;
}
I'd also rewize the png to the needed size to save some kB to download.
I hope that helps.