I am currently unable to resize the brand logo image in my Bulma CSS navbar without the image. Setting an inline width and height on the image per the documentation stretches the image. How do I resize the image without distortion?
navbar.component.html
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img src="../assets/images/my-image.png" width="112" height="28"/>
Brand Name
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
</nav>
navbar.component.scss
#import "../../scss/fonts";
.navbar {
background: #ffaaa6;
}
.navbar-brand {
font-family: $pacifico;
}
Related
I am implementing a website with Meteor + Blaze + Bulma. I've basically created a navigation menu and got the burger button working for small devices. But the problem is, that the position of the burger button is messed up.
I would like to have it on the far right and vertically aligned with the logo. But the burger is right next to the logo and also slightly lower. I've tried "position: absolute; right:0;" but it keeps jumping back.
Is Bulma not suited for use with Blaze and Meteor? I have no other CSS files so far and just added Bulma in the header tags. So what could be the issue?
<template name="navigation">
<nav class="navbar is-transparent" role="navigation" aria-label="main navigation">
<div class="container">
<!-- Logo/Home -->
<div class="navbar-brand">
<a class="" href="{{pathFor route='Home'}}">
<img src="logo.svg" width="200" height="29" />
</a>
<!-- Burger Menu Button -->
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navlist">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<!-- Navigation Conent -->
<div id="navlist" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="{{pathFor route='1'}}">
1
</a>
<a class="navbar-item" href="{{pathFor route='2'}}">
2
</a>
<a class="navbar-item" href="{{pathFor route='3'}}">
3
</a>
<a class="navbar-item" href="{{pathFor route='4'}}">
4
</a>
<a class="navbar-item" href="{{pathFor route='5'}}">
5
</a>
</div>
<!-- Navbar social -->
<div class="navbar-end">
<a class="navbar-item icon is-large" href="https://www.meetup.com/...">
<i class="fab fa-lg fa-meetup"></i>
</a>
<a class="navbar-item icon is-large" href="https://www.facebook.com/...">
<i class="fab fa-lg fa-facebook"></i>
</a>
<a class="navbar-item icon is-large" href="https://www.youtube.com/...">
<i class="fab fa-lg fa-youtube"></i>
</a>
</div>
</div>
</div>
</nav>
You need to add the class navbar-item to the container of your logo like that :
<div class="navbar-brand">
<a class="navbar-item" href="{{pathFor route='Home'}}"> <!-- Adding the class navbar-item -->
<img src="logo.svg" width="200" height="29" />
</a>
<!-- Burger Menu Button -->
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navlist">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
Result on my own project :
Without navbar-item :
With navbar-item :
I am trying to create a responsive bootstrap sticky nav to go above the carousel. However the navbar covers the top proportion of the image. How can i change so that it sticks above for desktop/mobile, but doesn't overflow onto the image itself.
<nav class="navbar navbar-expand-lg bg-primary fixed-top navbar " color-on-scroll="400">
<div class="container">
<div class="navbar-translate">
<button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span><i class="fas fa-bars" style="
color: #ffffff;
"></i></span>
</button>
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" class="img-fluid" alt="Responsive image">
</div>
<div class="collapse navbar-collapse justify-content-end" id="navigation" >
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)" onclick="scrollToDownload()">
<p>Location</p>
Give margin-top:100px or what is the height of you navigation menu, applying that height to the slider parent div class and it works fine.
Solution:
I added body { padding-top: 90px; }
How do I use Bootstrap 4 with a pattern background
Just converting website to use Boostrap and currently I have this header using the dark background and it looks fine but ideally instead of just the dark grey background I want to use the patterned background I was previously using as the nav bar, this would go over the whole width of the page instead of the dark grey.
<div class="container-fluid fixed-top bg-dark">
<div class="navbar navbar-expand-lg navbar-dark bg-dark container text-center">
<a href="http://jthink.net/index.jsp" class="navbar-brand">
<img src="http://www.jthink.net/images/icon32.png" width="30" height="30" class="d-inline-block align-top" alt="">
JThink
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="navbar-nav">
<a class="nav-item nav-link" href="http://blog.jthink.net">
Blog
</a>
<a class="nav-item nav-link" href="http://jthink.net/jaikozforum">
User Forum
</a>
<a class="nav-item nav-link" href="http://jthink.net/songkong">
SongKong
</a>
<a class="nav-item nav-link" href="http://jthink.net/jaikoz">
Jaikoz
</a>
<a class="nav-item nav-link" href="http://albunack.net" target="_blank">
Albunack
</a>
<a class="nav-item nav-link" href="http://www.jthink.net/jaudiotagger/index.jsp" >
Jaudiotagger
</a>
</div>
</div>
</div>
</div>
e.g instead of looking like this
I want the blue background in this screenshot to be used for the navbar
You can apply a background image to your bootstrap navbar by adding a background-image style to the div surrounding your navbar.
Here are the attributes you can apply to your image:
background-image: url("[file-location].png");
background-repeat: ;/* Determine what direction the image will repeat */
background-position: ; /* Where the image will be positioned relative to "top, right, bottom, and/or left */
background-attachment: ; /* use with "fixed" to make it scroll with page */
Read more about this property at W3Schools.
If the background image is making your hyperlink hard to read, change its normal color using color: [hex value / color name]; on nav-item or nav-link like this:
.nav-item > a {
color: #000000; /* [hex value / color name] */
}
Then you can change the color of the link when you hover over it by using the following:
.nav-item > a:hover {
color: red; /* [hex value / color name] */
}
In the drop-down menu for mobile devices, "glyphicon-leaf" is centered, but vertically there is no alignment in one line, as in the case of text (a screen is attached)
http://www.imageup.ru/img69/2884966/123.jpg.html
https://codepen.io/vosolodkiy/pen/XeqaOR
HTML
<div class="navbar-brand"><a href="index.html" title="Food, LLC"><h1>Food, LLC</h1>
</a>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu_collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="menu_collapse" class="collapse navbar-collapse">
<ul id="menu-list" class="nav navbar-nav">
<li><a href="#Chicken" class="hidden-sm hidden-md hidden-lg">
<span class="glyphicon glyphicon-leaf"></span>Chicken</a>
</li>
<li><a href="#Beef" class="hidden-sm hidden-md hidden-lg ">
<span class="glyphicon glyphicon-leaf"></span>Beef</a>
</li>
<li><a href="#Sushi" class="hidden-sm hidden-md hidden-lg">
<span class="glyphicon glyphicon-leaf"></span>Sushi</a>
</li>
</ul>
</div><!--menu-list-->
</div><!--container-->
</nav><!--navigation menu-->
</header>
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
If you wrap the content in a div tag with the class wrap and give it a fixed width you can vertical align multiple elements relative to each other. I hope this is what you want to achieve. The below CSS classes are changed.
CSS:
.wrap{
width:120px;
text-align:left;
display: inline-block;
}
Below is a working example for the same! Let me know if this fixes your issue!
Codepen Demo
This is my navbar code :
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="sampale.html"><font color="#125EAA">Downloads</font></a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Browser</li>
</ul>
<div class="btn-group">
<a class="btn dropdown-toggle btn-primary" data-toggle="dropdown" href="#">
Guides
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
<li>User Guide 1</li>
<li>Option 2</li>
</ul>
</div> <!-- dropdown -->
<div class="btn-group">
<a class="btn dropdown-toggle btn-primary" data-toggle="dropdown" href="#">
<span class="caret"></span>
</a>
and this is my css file ( custom.css )
.navbar-inverse .navbar-inner {
background-color: #FFDD00; /* fallback color, place your own */
background-image: none;
background-repeat: no-repeat;
filter: none;
}
Result is :
In the code portion Browser
Browser
the background of the Browser portion still shows the default color ( black ) but I want it to show the background-color of yellow (#FFDD00).Can we fix that part ?
Also , can we edit the btn-primary class in css . I want to change the color of the button.
I had these 2 questions. Any help greatly appreciated ! danke!
For your first question use:
background-color: #FFDD00 !important;
For your second use:
.btn-primary {
background-color: red;
}