Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Youtube HeaderNav layout
import React from 'react';
import {Image, Menu} from 'semantic-ui-react';
import './HeaderNav.scss';
import logo from '../../assets/images/logo.jpg';
export class HeaderNav extends React.Component {
render() {
return (
<Menu borderless className='top-menu' fixed='top'>
<Menu.Item header className='logo'>
<Image src={logo} size='tiny'/>
<Menu.Menu className='nav-container'>
{/* TODO */}
export default HeaderNav; {
border: none; /*Remove Semantic UI's bottom border*/
.logo {
width: 17rem;
.nav-container {
justify-content: space-between; /*maximize whitespace between elements*/
flex-grow: 1; /* take available space in the flex container */
padding: 0;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.