Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

updated navbar element spacing for small screen #28

Merged
merged 1 commit into from
Jul 21, 2024
Merged

updated navbar element spacing for small screen #28

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export default function Navbar() {
<div className="w-full h-[60px] top-0 flex z-50 text-2xl">

<div style={containerStyle} className="z-50 text-white border-none flex justify-between items-center">
<div className="min-w-fit h-[60px] w-full pl-10 flex justify-start items-center" >
<div className="min-w-fit h-[60px] w-full sm:w-fit md:w-full pl-5 flex justify-start items-center" >
<img src={web3sshLogo.src} alt="Web3SSH logo" style={{ height: '50px' }} onClick={()=>(window.location.href='/')}/>
</div>

Expand All @@ -81,7 +81,7 @@ export default function Navbar() {
))}
</ul>
</div>
<div className="flex w-full min-w-fit h-full mr-0 justify-center items-center" >
<div className="w-full min-w-fit h-full mr-5 sm:mr-0 flex justify-end sm:justify-around items-center" >
<ul className=" w-fit hidden lg:flex justify-center items-center mx-5 lg:gap-5 md:gap-1 gap-6" >
<li>
<a
Expand All @@ -103,7 +103,7 @@ export default function Navbar() {
</li>
</ul>

<a href="/register" className=' sm:w-20 md:w-3/4 lg:w-fit flex justify-center lg:justify-center'>
<a href="/register" className=' sm:w-20 md:w-3/4 lg:w-fit'>
<button
type="button"
className="text-center text-sm lg:block text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg px-5 py-2.5 "
Expand Down