I am using NextJs framework for a frontend development I am new to frontend I am trying to create navbar in which I am getting underline below menu items. I tried few CSS property but they didn't work out.
Below is my code:
Navbar.js
import Link from 'next/link';
const Navbar = () => {
return(
<nav className='navigation'>
<div className="logo">
<h1>My logo</h1>
</div>
<div className="menu">
<ul>
<li className="menu-items"><Link href="/">Home</Link></li>
<li className="menu-items"><Link href="/about">About</Link></li>
<li className="menu-items"><Link href="/contact">Contact</Link></li>
</ul>
</div>
</nav>
);
}
export default Navbar;
global.css
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
.navigation {
display: flex;
justify-content: space-between;
}
.menu-items {
list-style-type: none;
display: inline;
margin-right: 20px;
background-color: coral;
color: white;
padding: 10px;
border-radius: 3px;
}
How can I achieve my desired results?
try using "Text Decoration".
.menu-items {
list-style-type: none;
display: inline;
margin-right: 20px;
background-color: coral;
color: white;
padding: 10px;
border-radius: 3px;
text-decoration: none; /* <=== add this */
}
if not work, try this.
.menu-items > a {
text-decoration: none;
}
Related
I need help with figuring out how to focus the 'clicking' part of this dropdown navbar icon so that I don't have to click a little to the left of the icon (also the other navbar items) since I'm trying to recreate Mac OS's navbar.
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 12px;
color: white;
text-align: center;
padding: 10px 10px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 12px;
border: none;
outline: none;
color: white;
padding: 5px 10px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">
<i class="fa-solid fa-power-off"></i>
</button>
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</div>
IMG:
Problem
I found the source where OP came from and I am not surprised why you ran into trouble. W3Schools is a good resource because it's simple and never over explains things but at times it omits or just overlooks certain details. In the W3School example "Dropdown Menu Inside a Navigation Bar" the following segment of a CSS ruleset is wrong:
.dropbtn:focus {
background-color: red;
}
focus event only applies to the these tags:
<input>
<textarea>
<select>
<a>
It may vary between browsers but the above list is standard. So <button> is usually not focusable.
Solution
Change the <button> into an <a>
Add e.preventDefault(); to the event handler so the page won't jump when the <a> is clicked.
The rest of the changes are recommended, but not necessary. Although I strongly suggest that you don't use inline event handlers:
<button onclick="lame(this)">Don't do this</button>
Instead use:
// onevent property
document.querySelector('button').onclick = better;
OR
// event listener
document.querySelector('button').addEventListener('click', best);
const menu = document.querySelector("menu");
document.querySelector('.btn').onclick = toggleMenu;
function toggleMenu(e) {
e.preventDefault();
menu.classList.toggle("show");
}
window.onclick = function(e) {
if (!e.target.matches('.btn, .btn *') && menu.classList.contains('show')) {
menu.classList.remove('show');
}
}
html {
font: 300 2vmax/1.2 'Segoe UI';
}
nav {
display: flex;
overflow: hidden;
background-color: #333;
}
nav a {
display: block;
padding: 0.75rem 1.2rem;
color: white;
text-align: center;
text-decoration: none;
}
.dropdown {
min-width: 7.75rem;
overflow: hidden;
}
.btn {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
padding: 0.75rem 1.2rem;
border: none;
outline: none;
color: white;
text-align: left;
}
.btn * {
display: block;
font-weight: 300;
}
.btn i {
padding-top: 0.15rem;
}
nav a:hover,
.btn:focus {
background-color: red;
}
menu {
position: absolute;
display: none;
min-width: 7.75rem;
margin: 0;
padding-left: 0;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
menu a {
padding: 0.5rem 1.2rem;
text-align: left;
color: black;
}
menu a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<nav>
Home
News
<div class='dropdown'>
<a href='#' class="btn"><b>Menu</b>
<i class="fa fa-chevron-circle-down"></i>
</a>
<menu>
Link 1
Link 2
Link 3
</menu>
</div>
</nav>
Following this simple tutorial as an intro to Nuxt with a hosted headless CMS.
I got to the end, put my API key into the required file, but I get the error:
Cannot read property 'data' of undefined
at line 21, ie:
const header = PrismicDom.RichText.asText(blog_post.data.blog_post_title);
It's a basic scaffolded Nuxt.js project from scratch, so pretty clean, not much going on here.
No one in the comments seems to have encountered this issue. Any ideas?
(left most of default nuxt.js CSS and combined with the tutorial's, that really shouldn't be the issue though.)
<template>
<section class="blog-post">
<h1 class="title">{{ header }}</h1>
<p class="paragraph">{{ content }}</p>
</section>
</template>
<script>
import Prismic from "prismic-javascript";
import PrismicDom from "prismic-dom" //importing the Dom
import PrismicConfig from "./../prismic.config.js";
export default {
async asyncData() {
const api = await Prismic.getApi(PrismicConfig.apiEndpoint);
let blog_post = {};
const results = await api.query(
Prismic.Predicates.at("document.type", "blog_post"),
{ lang: "en-gb" } //This is a Prismic query option
);
blog_post = results.results[0];
const header = PrismicDom.RichText.asText(blog_post.data.blog_post_title);
const content = PrismicDom.RichText.asText(blog_post.data.blog_post_content);
return {
blog_post,
header,
content
};
}
};
</script>
<style>
.container {
margin: 0 auto;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.blog-post {
margin: 25px 0;
padding: 0 100px;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.title {
font-family:
'Quicksand',
'Source Sans Pro',
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
'Helvetica Neue',
Arial,
sans-serif;
display: block;
font-weight: 300;
font-size: 100px;
color: #35495e;
letter-spacing: 1px;
margin: 50px 0;
}
.subtitle {
font-weight: 300;
font-size: 42px;
color: #526488;
word-spacing: 5px;
padding-bottom: 15px;
}
.links {
padding-top: 15px;
}
p {
color: #000;
margin: 15px 0 5px;
max-width: 450px;
line-height: 1.44;
}
</style>
I have a plus icon which on-hover, slides to add to cart button. I want to achieve same functionality, using button-click.
I have tried CSS but it does not work. Will JQuery can achieve this?
codepen.io
HTML
<div class="socialIcons">
<div class="add-cart-new">
<a href="" class="add-cart-a">
<i class="fa-3x fa fa-plus-circle"></i>
<span class="text-add-cart"> Add to cart </span>
</a>
</div>
</div>
CSS
.add-cart-a
{
width: 181px;
}
.add-cart-new
{
height: 56px;
}
.socialIcons .add-cart-new {
background-color: yellow;
list-style: none;
display: inline-block;
margin: 4px;
border-radius: 2em;
overflow: hidden;
}
.socialIcons .add-cart-new a {
display: block;
padding: 0.5em;
min-width: 2.5em;
max-width: 2.5em;
height: 2.28571429em;
white-space: nowrap;
line-height: 1.5em; /*it's working only when you write text with icon*/
transition: 0.5s;
text-decoration: none;
font-family: arial;
color: #fff;
}
.socialIcons .add-cart-new i {
margin-right: 0.5em;
}
.socialIcons .add-cart-new:hover a {
max-width: 205px;
padding-right: 1em;
}
.socialIcons .add-cart-new {
background-color: #EC7F4A;
}
.socialIcons .add-cart-new a
{
position:relative;
bottom:5px;
right:0.3px;
}
.text-add-cart
{
position:relative;
right:7px;
bottom:12px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
This is the code I have tried: JSFiddle
If you want this as a CSS only solution you could use a checkbox and the focus pseudo class this might be a bit overkill. It could easily be done with a small amount of JS.
$('.add-cart-new').click(function() {
$(this).toggleClass('is-open');
});
You can then replace the .socialIcons .add-cart-new:hover a with .socialIcons .add-cart-new.is-open a.
A few hours back I asked a question on how my background disappeared when i added a collapsible list. The solution they gave me was:
body.ui-overlay-a {
background-color: #dc143c;
}
div.ui-page-theme-a {
background-color: transparent;
}
I asked the same person about the blue box and he gave me this:
div.ui-page-theme-a {
background-color: transparent;
}
But this didn't work does anyone have any answers?
Navigation bar code (CSS):
/* Navigation bar */
.nav {
font-family: 'Roboto', sans-serif;
margin-top: 20px;
height: 40px;
background: #000000;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav ul li {
list-style: none;
}
.nav ul li a {
text-decoration: none;
float: right;
display: block;
padding: 10px 50px;
color: white;
}
.nav ul li a:hover {
color: #D3D3D3;
}
.headerBreak {
width: 100%;
height: 0;
border-bottom: 2px solid #000000;
}
h4 {
font-family: 'Roboto', sans-serif;
font-size: 24px;
text-align: right;
text-decoration: none;
}
p {
font-family: 'Lato', sans-serif;
font-size: 30px;
}
And this is the content inside the navigation bar (inside )
<div class="nav">
<ul>
<li>Contacts</li>
<li>Map</li>
<li>Reservations</li>
<li>Online Order</li>
<li>Menu</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
<div class="headerBreak"></div>
Note that this does not only apply to the navigation bar but also applies to my and
Reference: http://i.imgur.com/acnJE5Y.png
Edit 1: I added this website to a free domain hoster, I have also added outline: none; to nav ul li a { but it still doesnt work when i open itbut when I duplicate the file and I open it the text does not have the blue outline, but in my original file it does
http://marcxu88.000webhostapp.com
If you could inspect the code and see if what is wrong it would be greatly appreciated.
Thanks in advance.
Try adding outline: none; to the selector .nav ul li a.
I'm trying to get my jQuery tabs to go all the way across the top and line up on the left and right side with the edges, I tried doing fixed widths but it doesn't seem to want to cooperate that way. Does anyone know how to do this? Also it keeps jumping around when you click on a tab, I saw it's because they are hiding the border of the content by moving the tab down over the border... is there anyway to connect the tabs to the content without moving the tab itself and creating that jumping?
http://jsfiddle.net/fun6faos/2/
<style>
.tabs-all {
width: 830px;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.etabs {
margin: 0;
padding: 0;
width: 100%;
}
.tab-container .panel-container {
background: #fff;
border: solid #c2c2c2 1px;
padding: 10px;
}
.panel-container {
margin-bottom: 10px;
}
.tab1 {
width: 209px;
display: inline-block;
*display:inline;
background: #fff;
border-bottom: none;
}
.tab2 {
width: 233px;
display: inline-block;
*display:inline;
background: #fff;
border-bottom: none;
}
.tab3 {
width: 124px;
display: inline-block;
*display:inline;
background: #fff;
border-bottom: none;
}
.tab4 {
width: 207px;
display: inline-block;
*display:inline;
background: #fff;
border-bottom: none;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.tab1.active, .tab2.active, .tab3.active, .tab4.active {
background: #fff;
padding-top: 6px;
position: relative;
top: 1px;
border-color: #c2c2c2;
border-top: 5px solid #70bf47;
border-right: solid 1px #c2c2c2;
border-left: solid 1px #c2c2c2;
}
.tab1 a, .tab2 a, .tab3 a, .tab4 a {
font-size: 15px;
line-height: 2em;
display: block;
padding: 0 10px;
outline: none;
text-decoration: none;
color: #464646;
font-weight: 600;
}
.tab1 a:hover, .tab2 a:hover, .tab3 a:hover, .tab4 a:hover {
text-decoration: none;
}
.tab1 a.active, .tab2 a.active, .tab3 a.active, .tab4 a.active {
text-decoration: none;
color: #464646;
}
</style>
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs();
});
</script>
</head>
<body>
<div class="tabs-all">
<div id="tab-container" class='tab-container'>
<ul class='etabs'>
<li class='tab1'>What is Community Solar?</li>
<li class='tab2'>Why Clean Energy Collective?</li>
<li class='tab3'>How it Works?</li>
<li class='tab4'>Community Solar Benefits</li>
</ul>
<div class='panel-container'>
<div id="tabs1">
<h2>TITLE</h2>
<p>Information</p>
</div>
<div id="tabs2">
<h2>TITLE</h2>
<p>Information</p>
</div>
<div id="tabs3">
<h2>TITLE</h2>
<p>Information</p>
</div>
<div id="tabs4">
<h2>TITLE</h2>
<p>Information</p>
</div>
</div>
</div>
</div>
You need to zero out the margins. Add this to your CSS:
body {
margin:0px;
}
Taking a cue from Bootstrap's tabs, we can apply table layout properties with CSS:
li.tab {display: table-cell; width: 1%;}
http://jsfiddle.net/isherwood/fun6faos/15
This example results in uniform tab widths. To have tabs sized somewhat proportionately to their text labels, remove the width property:
http://jsfiddle.net/isherwood/fun6faos/17
A note on your use of classes... A class, by definition, is a set of properties applied to multiple elements. When you're incrementing classes, you're using them wrongly. You should never have a list of elements in your CSS that have indexed numbers. I've stripped all such craziness out of your code.