PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Tuesday, November 8, 2022

[FIXED] How to make a shadow on Semantic Ui React Navbar Menu

 November 08, 2022     css, menu, navbar, reactjs, shadow     No comments   

Issue

Im trying to make a shadow on navbar... I know how to make a shadow but its not working on my navbar.

Here is an image of what my navbar look like...

enter image description here

I purposely but green border so you can see that i didnt put the wrong class name.

i put a red shadow on the navbar and the box...

Here is my css for navbar:

.ui.secondary.pointing.menu {
  border-bottom: 3px solid green !important;
  box-shadow: 3px 3px 6px red !important;
}

and here is for the box:

.box {
  height: 200px;
  background-color: blanchedalmond;
  box-shadow: 3px 3px 6px red !important;
}

You can see my full code here: https://codesandbox.io/s/xenodochial-darwin-lr55t

And you can preview here: https://ml88b.csb.app/admin


Solution

your shadow is working but not visible because of .box background-color. remove background-color or move the menu div inside pushable div.

Or

add position: relative; style to this class .ui.secondary.pointing.menu



Answered By - Jahid Hasan
Answer Checked By - Dawn Plyler (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing