Skip to content

Commit a717cd8

Browse files
w3bdesignw3bdesign
committed
Fix annoying CSS bug in NavBar
Fix annoying CSS bug where menu will move on front page only
1 parent 6e60393 commit a717cd8

File tree

6 files changed

+101
-63
lines changed

6 files changed

+101
-63
lines changed

‎components/Category/Categories.component.jsx

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { v4 as uuidv4 } from 'uuid';
22

33
import PageTitle from 'components/Header/PageTitle.component';
44

5+
6+
57
/**
68
* Map over the categories and display them individually.
79
* Uses uuidv4 for unique key IDs
@@ -10,14 +12,23 @@ import PageTitle from 'components/Header/PageTitle.component';
1012
const Categories = ({ categories }) => {
1113
return (
1214
<>
15+
16+
<br/>
17+
18+
19+
20+
21+
1322
<PageTitle title="Kategorier" />
1423

15-
<section className="py-8 bg-white">
24+
25+
26+
<section className="bg-white">
1627
<div className="container flex flex-wrap items-center mx-auto">
1728
{categories.map(({ name }) => (
1829
<div
1930
key={uuidv4()}
20-
className="flex flex-col w-full p-6 md:w-1/3 xl:w-1/4"
31+
className="flex flex-col p-6 md:w-1/3 xl:w-1/4"
2132
>
2233
<div className="flex items-center justify-center p-6 text-center border border-gray-300 rounded-lg shadow hover:shadow-outline">
2334
<p className="text-lg">{name}</p>

‎components/Header/Navbar.component.jsx

Lines changed: 54 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -12,57 +12,61 @@ import Hamburger from './Hamburger.component';
1212
const Navbar = () => {
1313
return (
1414
<header>
15-
<nav id="header" className="fixed top-0 z-30 w-full py-1 bg-white ">
16-
<div className="container flex flex-wrap items-center justify-between w-full px-6 py-3 mx-auto mt-0">
17-
<Hamburger />
18-
<div
19-
className="order-3 hidden w-full md:flex md:items-center md:w-auto md:order-1"
20-
id="menu"
21-
>
22-
<ul className="items-center justify-between pt-4 text-base text-gray-700 md:flex md:pt-0">
23-
<li>
24-
<Link href="/produkter">
25-
<a className="inline-block px-4 py-2 no-underline hover:text-black hover:underline">
26-
Produkter
27-
</a>
28-
</Link>
29-
</li>
30-
<li>
31-
<Link href="/kategorier">
32-
<a className="inline-block px-4 py-2 no-underline hover:text-black hover:underline">
33-
Kategorier
34-
</a>
35-
</Link>
36-
</li>
37-
</ul>
38-
</div>
39-
<div className="order-1 md:order-2">
40-
<Link href="/">
41-
<a className="flex items-center text-xl font-bold tracking-wide text-gray-800 no-underline hover:no-underline ">
42-
<svg
43-
className="mr-2 text-gray-800 fill-current"
44-
xmlns="http://www.w3.org/2000/svg"
45-
width="24"
46-
height="24"
47-
viewBox="0 0 24 24"
48-
>
49-
<path d="M5,22h14c1.103,0,2-0.897,2-2V9c0-0.553-0.447-1-1-1h-3V7c0-2.757-2.243-5-5-5S7,4.243,7,7v1H4C3.447,8,3,8.447,3,9v11 C3,21.103,3.897,22,5,22z M9,7c0-1.654,1.346-3,3-3s3,1.346,3,3v1H9V7z M5,10h2v2h2v-2h6v2h2v-2h2l0.002,10H5V10z" />
50-
</svg>
51-
NETTBUTIKK
52-
</a>
53-
</Link>
54-
</div>
55-
<div
56-
className="flex items-center order-2 md:order-3"
57-
id="nav-content"
58-
>
59-
<Search />
60-
<SVGMobileSearchIcon />
61-
<Cart />
62-
</div>
15+
<nav id="header" className="fixed top-0 z-50 w-full py-1 bg-white ">
16+
<div
17+
id="navbar-div"
18+
className="container flex flex-wrap items-center justify-between px-6 py-3 mt-0 "
19+
20+
>
21+
<Hamburger />
22+
<div
23+
className="order-3 hidden w-full md:flex md:items-center md:w-auto md:order-1"
24+
id="menu"
25+
>
26+
<ul className="items-center justify-between pt-4 text-base text-gray-700 md:flex md:pt-0">
27+
<li>
28+
<Link href="/produkter">
29+
<a className="inline-block px-4 py-2 no-underline hover:text-black hover:underline">
30+
Produkter
31+
</a>
32+
</Link>
33+
</li>
34+
<li>
35+
<Link href="/kategorier">
36+
<a className="inline-block px-4 py-2 no-underline hover:text-black hover:underline">
37+
Kategorier
38+
</a>
39+
</Link>
40+
</li>
41+
</ul>
6342
</div>
64-
</nav>
65-
</header>
43+
<div className="order-1 md:order-2">
44+
<Link href="/">
45+
<a className="flex items-center text-xl font-bold tracking-wide text-gray-800 no-underline hover:no-underline ">
46+
<svg
47+
className="mr-2 text-gray-800 fill-current"
48+
xmlns="http://www.w3.org/2000/svg"
49+
width="24"
50+
height="24"
51+
viewBox="0 0 24 24"
52+
>
53+
<path d="M5,22h14c1.103,0,2-0.897,2-2V9c0-0.553-0.447-1-1-1h-3V7c0-2.757-2.243-5-5-5S7,4.243,7,7v1H4C3.447,8,3,8.447,3,9v11 C3,21.103,3.897,22,5,22z M9,7c0-1.654,1.346-3,3-3s3,1.346,3,3v1H9V7z M5,10h2v2h2v-2h6v2h2v-2h2l0.002,10H5V10z" />
54+
</svg>
55+
NETTBUTIKK
56+
</a>
57+
</Link>
58+
</div>
59+
<div
60+
className="flex items-center order-2 md:order-3"
61+
id="nav-content"
62+
>
63+
<Search />
64+
<SVGMobileSearchIcon />
65+
<Cart />
66+
</div>
67+
</div>
68+
</nav>
69+
</header>
6670
);
6771
};
6872

‎components/Index/Hero.component.jsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
*/
44
const Hero = () => {
55
return (
6+
<>
7+
68
<section
79
id="hero"
810
className="flex w-full pt-12 mx-auto mt-24 bg-right bg-cover md:pt-0 md:items-center"
@@ -22,6 +24,8 @@ const Hero = () => {
2224
</div>
2325
</div>
2426
</section>
27+
</>
28+
2529
);
2630
};
2731

‎components/Product/IndexProducts.component.jsx

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,18 @@ import PageTitle from 'components/Header/PageTitle.component';
1111
const IndexProducts = ({ products }) => {
1212
return (
1313
<>
14+
<br/>
1415

15-
<PageTitle title="Produkter" />
16-
17-
<section className="py-4 bg-white">
18-
<div id="product-container" className="container flex flex-wrap items-center mx-auto overflow-hidden">
16+
17+
<PageTitle title="Produkter" />
18+
19+
20+
21+
<section className="bg-white">
22+
<div
23+
id="product-container"
24+
className="container flex flex-wrap items-center mx-auto overflow-hidden"
25+
>
1926
{products ? (
2027
products.map(
2128
({
@@ -30,7 +37,7 @@ const IndexProducts = ({ products }) => {
3037
}) => (
3138
<div
3239
key={uuidv4()}
33-
className="flex flex-col w-full p-6 md:w-1/2 xl:w-1/4"
40+
className="flex flex-col p-6 md:w-1/2 xl:w-1/4"
3441
>
3542
<Link
3643
href="/produkt/[post]"
@@ -39,8 +46,8 @@ const IndexProducts = ({ products }) => {
3946
<a>
4047
<img
4148
id="product-image"
42-
// className="object-cover w-full h-64 transition duration-500 ease-in-out transform hover:grow hover:shadow-lg hover:scale-105"
43-
className="w-64 transition duration-500 ease-in-out transform hover:grow hover:shadow-lg hover:scale-105"
49+
// className="object-cover w-full h-64 transition duration-500 ease-in-out transform hover:grow hover:shadow-lg hover:scale-105"
50+
className="w-64 transition duration-500 ease-in-out transform hover:grow hover:shadow-lg hover:scale-105"
4451
src={image.sourceUrl}
4552
/>
4653
</a>
@@ -75,8 +82,6 @@ const IndexProducts = ({ products }) => {
7582
)}
7683
</div>
7784
</section>
78-
79-
8085
</>
8186
);
8287
};

‎pages/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ import { FETCH_ALL_PRODUCTS_QUERY } from 'utils/const/GQL_QUERIES';
1212
const HomePage = ({ products }) => {
1313
return (
1414
<>
15-
<Hero />
15+
16+
<Hero/>
1617
{products && <IndexProducts products={products} />}
1718
</>
1819
);

‎styles/index.css

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
#hero {
55
background-image: url('https://images.unsplash.com/photo-1422190441165-ec2956dc9ecc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80');
6-
max-width: 1050px;
6+
/*max-width: 1050px;*/
77
height: 24rem;
88
}
99

@@ -27,7 +27,20 @@
2727
max-width: 1100px;
2828
}
2929

30+
@media only screen and ( min-width: 769px ) {
31+
#navbar-div {
32+
margin-left: 350px;
33+
/* margin-right: 50vw;*/
34+
}
35+
}
3036

37+
@media only screen and ( max-width: 769px ) {
38+
#navbar-div {
39+
margin-left: auto;
40+
margin-right: auto;
41+
42+
}
43+
}
3144

3245
.ais-SearchBox-reset {
3346
margin-left: 10px;

0 commit comments

Comments
 (0)