Advertisement

#11 Main Navigation (Logo)

In this article we will start creating the header of our web pages which will contain the main navigation component. We will start by including a css reset and some basic styling by importing a few files into our main sass file. Once that is done we will create the basic layout of the main navigation starting with a logo area which we will style in a separate sass file and once again importing into our main sass file.

Parts

Including some base styling

  • WebUi
    • package.json

To start things off we are going to include a css reset. In this case we are going to use normalize.css . We can install the npm package using the command shown in (a) and as of the writing of this article the version number is shown in (b).

Terminal

npm install --save-dev normalize.css
(a) Terminal command used to install the normalize.css npm package in our project.

package.json

{
  ...
  "devDependencies": {
    ...
    "normalize.css": "^8.0.0",
    ...
  }
}
(b) The version number of the normalize.css npm package as of the writing of this article.

Including some basic styling

  • WebUi
    • Source
      • main.site.scss

Along with the css reset that we just included I am also going to be using some base styling and addition functions and mixins provided by bourbon and bitters . We are going to include them both by adding a couple of include statements in our main sass (c) file where we are also going to add a little extra styling just while we are developing our main navigation.

main.site.scss

@import "../node_modules/normalize.css/normalize.css";

@import "./sass/0-bourbon/_bourbon.scss";
@import "./sass/1-base/_base.scss";

body { /* Only for testing...remove when done */
    height: 3000px;
    background-color: aqua;

    .body-content {
        background-color: yellow;
        padding-top: em(56.33px);
    }
}
(c) Base and testing styles for our main navigation.

Starting the main navigation

  • WebUi
    • Pages
      • Shared
        • _MainNav.cshtml

The next step is to create the starting html structure of our main navigation (d). We are going to break the creation of the header bar into different pieces and the first is going to be the logo area.

_MainNav.cshtml

<header>
    <nav class="main-navigation">
        <a href="/" class="logo">
            <div class="logo-img">
                <img src="/images/logo.svg" alt="Exciton Interactive Logo"/>
            </div>
            <div class="logo-text">
                Exciton Interactive
            </div>
        </a>
    </nav>
</header>
(d) Starting point for our main navigation which includes a logo area.
Advertisement

Adding the main navigation to our page

  • WebUi
    • Pages
      • Shared
        • _Layout.cshtml

Since we will want this header bar to included in every page we will add it to our common layout page (e). With that done if we refresh the browser we should see something like what is shown in (f).

_Layout.cshtml

...
<body>
    <partial name="_MainNav"/>
    <div class="body-content">
        @RenderBody()
    </div>
    ...
</body>
...
(e) Adding the main navigation to our layout page will result in it being displayed on every page.
Image showing our main navigation without any additional styling
(f) Our initial main navigation without any additional styling.

Time for some styling

  • WebUi
    • Source
      • components
        • main-nav
          • main-nav.component.scss

In order to add some additional styling to the header we will create a separate file that will contain the sass (g). For now it of course just contains the styling for the header itself and the logo.

main-nav.component.scss

@import "../../sass/_non-rendering.scss";

$dark-gray: #333 !default;

$navigation-anchor-color: lighten($dark-gray, 20%) !default;
$navigation-background-color: white !default;
$navigation-border-color: $navigation-anchor-color !default;

$mobile-break-width: 1024px !default;
$gutter: 5px !default;

header {
    position: fixed;
    width: 100%;
    z-index: 2000;

    .main-navigation {
        display: grid;
        grid-template-areas: "logo";
        grid-template-columns: auto;
        background-color: $navigation-background-color;
        border-color: $navigation-border-color;
        border-style: solid;
        @include border-width(0 0 1px 0);
        @include padding(null em($gutter));
        position: relative;
        z-index: 1;

        @include media-gt($mobile-break-width) {
            grid-template-areas: "logo";
            grid-template-columns: auto;
        }
    }

    .logo {
        grid-area: logo;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-left: 0;

        .logo-img {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: em(48px);
        }
    
        .logo-text {
            display: none;
            white-space: nowrap;
            font-size: 1.5em;
            @include margin(null null em(2px) em(10px));
            font-weight: 600;
    
            @include media-gt-or-eq($mobile-break-width) {
                display: block;
            }
        }
    }
}
(g) Initial styling of the header and the logo area of our main navigation.

Styles do not help unless they are included

  • WebUi
    • Source
      • main.page.scss

In order to include the styles for the header we will just add another import statement to our main sass file (h). With that file being imported if we check our browser now we should see our header and main navigation should look something like (i).

main.page.scss

...
@import "./components/main-nav/main-nav.component.scss";
...
(h) Importing the main navigation styles into our main sass file.
With the main navigation styles imported our header should look something like this.
(i) With the main navigation styles imported our header should look something like this.

Common anchor styles

  • WebUi
    • Source
      • components
        • main-nav
          • main-nav.component.scss

There is a common styling that I would like to have applied to all anchor tags within our main navigation so we will return to the main navigation sass file and add them now (j). And with this change our logo area should look like (k). Which takes care of this section of our main navigation.

main-nav.component.scss

...
header {
    ...
    a {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: $navigation-anchor-color;
        height: 100%;
        @include padding(null em(10px));
    }
    ...
}
(j) Common styling for all anchor tags in our main navigation.
After applying the common anchor styles to our logo area we are now finished with this section.
(k) After applying the common anchor styles to our logo area we are now finished with this section.
Exciton Interactive LLC
Advertisement