Looking for something? The search box in Material Design Lite is just like the

Utilizing material design lite, I am in the process of crafting a navigation bar. I strive to achieve a navigation bar similar to the image depicted below:

https://i.sstatic.net/g7EPC.png

After experimenting with some code, I managed to develop a decent navigation bar. However, it falls short of the perfection displayed in the image.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<div class="demo-layout-waterfall mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--waterfall">
    <!-- Top row, always visible -->
    <div class="mdl-layout__header-row">
        <!-- Title -->
        <span class="mdl-layout-title"><img src="~/images/transfeteBirdLogo.png" width="50" height="50" /></span>
        <div class="mdl-layout-spacer"></div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
              mdl-textfield--floating-label mdl-textfield--align-right">
            <label class="mdl-button mdl-js-button mdl-button--icon"
                   for="waterfall-exp">
                <i class="material-icons">search</i>
            </label>
            <div class="mdl-textfield__expandable-holder">
                <input class="mdl-textfield__input" type="text" name="sample"
                       id="waterfall-exp">
            </div>
        </div>
    </div>
    <!-- Bottom row, not visible on scroll -->
    <div class="mdl-layout__header-row">
        <div class="mdl-layout-spacer"></div>
        <!-- Navigation -->
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Electronics</a>
            <a class="mdl-navigation__link" href="">Cloths</a>
            <a class="mdl-navigation__link" href="">men</a>
            <a class="mdl-navigation__link" href="">Women</a>
        </nav>
    </div>
</header>
<div class="mdl-layout__drawer">
    <span class="mdl-layout-title"><img src="~/images/transfeteBirdLogo.png" width="50" height="50" /></span>
    <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
    </nav>
</div>
<main class="mdl-layout__content">
    <div class="page-content">@RenderBody()</div>
</main>

Seeking assistance to replicate the navigation bar showcased in the image using Google Material Design.

The navigation bar generated by my current code can be viewed in the image below:

https://i.sstatic.net/SL3cG.png

cssmaterial-designmaterial-design-litegwt-material-design

Answer №1

.mdl-layout__header-row,
.mdl-textfield {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: blue;
}

.mdl-layout__header-row:nth-child(1) {
  border-bottom: thin solid lightgray;
  padding-right: 2em;
}

.mdl-layout__header-row:nth-child(2) {
  padding: .5em 2em .5em 0;
}

.mdl-button {
  background-color: orange;
  color: white;
  padding: .4em
}

.mdl-textfield__input {
  padding: .5em;
}

.mdl-navigation a {
  color: white;
}
<div class="demo-layout-waterfall mdl-layout mdl-js-layout">
  <header class="mdl-layout__header mdl-layout__header--waterfall">
    <!-- Top row, always visible -->
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title"><img src="http://placehold.it/50" width="50" height="50" /></span>
      <div class="mdl-layout-spacer"></div>
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
              mdl-textfield--floating-label mdl-textfield--align-right">

        <div class="mdl-textfield__expandable-holder">
          <input class="mdl-textfield__input" type="text" name="sample" id="waterfall-exp">
        </div>
        <label class="mdl-button mdl-js-button mdl-button--icon" for="waterfall-exp">
                <i class="material-icons">search</i>
            </label>
      </div>
    </div>
    <!-- Bottom row, not visible on scroll -->
    <div class="mdl-layout__header-row">
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation -->
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="">Electronics</a>
        <a class="mdl-navigation__link" href="">Cloths</a>
        <a class="mdl-navigation__link" href="">men</a>
        <a class="mdl-navigation__link" href="">Women</a>
      </nav>
    </div>
  </header>

  <main class="mdl-layout__content">
    <div class="page-content"></div>
  </main>

Answer №2

HTML

<header class="mdl-layout__header mdl-layout__header--waterfall">
        <!-- Top row, always visible -->
        <div class="mdl-layout__header-row mdl-layout__header">
            <span class="mdl-layout-title"><img src="~/images/transfeteBirdLogo.png" width="50" height="50" /></span>

            <!-- Displayed on Computer and Tablet -->
            <!-- Search -->
            <div class="mdh-expandable-search mdl-cell--hide-phone">
                <form action="#">
                    <input type="text" placeholder="Search for Product , Brands ..">
                    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" style="background: #009688">
                        <i class="material-icons">search</i>
                    </button>

                </form>
            </div>


            <div class="mdl-layout-spacer mdl-cell--hide-tablet mdl-cell--hide-desktop"></div>
            <div class="mdl-cell--hide-tablet mdl-cell--hide-desktop mdl-textfield mdl-js-textfield mdl-textfield--expandable
                  mdl-textfield--floating-label mdl-textfield--align-right">
                <label class="mdl-button mdl-js-button mdl-button--icon"
                       for="waterfall-exp">
                    <i class="material-icons">search</i>
                </label>
                <div class="mdl-textfield__expandable-holder">
                    <input class="mdl-textfield__input" type="text" name="sample"
                           id="waterfall-exp">
                </div>
            </div>

            <!-- Buttons -->
            <!-- Right aligned menu below button -->
            <button id="demo-menu-lower-right"
                    class="mdl-button mdl-js-button mdl-button--icon">
                <i class="material-icons">more_vert</i>
            </button>

            <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
                for="demo-menu-lower-right">
                <li class="mdl-menu__item">Mobile App</li>
                <li class="mdl-menu__item">Customer Care</li>
                <li class="mdl-menu__item">Track Order</li>
                <li class="mdl-menu__item">Log in</li>
            </ul>
        </div>
        <!-- Bottom row, not visible on scroll -->
        <div class="mdl-layout__header-row" style="height: 35px;">
            <!-- Navigation -->
            <nav class="mdl-navigation">
                <a class="mdl-navigation__link" href="">Electronics</a>
                <a class="mdl-navigation__link" href="">Cloths</a>
                <a class="mdl-navigation__link" href="">men</a>
                <a class="mdl-navigation__link" href="">Women</a>
            </nav>
        </div>
    </header>

CSS

.mdh-expandable-search {
    margin: 0 50px;
    align-items: center;
    justify-content: center;
}

    .mdh-expandable-search form {
        max-width: 700px;
    }

    .mdh-expandable-search,
    .mdh-expandable-search form,
    .mdh-expandable-search input {
        /* Cross browser flex-grow */
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }

        .mdh-expandable-search,
        .mdh-expandable-search form {
            /* Cross browser inline-flex */
            display: -webkit-inline-box;
            display: -webkit-inline-flex;
            display: -moz-inline-box;
            display: -ms-inline-flexbox;
            display: inline-flex;
        }



            .mdh-expandable-search input {
                outline: none;
                border: none;
                font-size: 16px;
                color: #131212;
                /* background-color: #fcfdfd; */
                padding: 0px 35px 0px 10px;
                height: 40px;
                line-height: 40px;
                border-radius: 5px 5px 5px 5px;
                -moz-border-radius: 5px 5px 5px 5px;
                -webkit-border-radius: 5px 5px 5px 5px;
            }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing the hcSticky plugin for creating a scrolling effect on webpage content

I'm attempting to utilize the JQuery plugin, hcSticky, in order to achieve a scrolling effect on my fixed content. However, I seem to be encountering some difficulty getting it to function properly. What could I possibly be doing incorrectly? JSFIDDL ...

jqueryhtmlcss

Error in JavaScript: Uncaught TypeError - Unable to access the "left" property of an undefined object

This error is really frustrating and I've come across several inquiries regarding this console issue. It's not providing enough information in the chrome console for me to effectively troubleshoot. /** * Adjustment of dropdown menu positio ...

javascriptjquerycssconsole.log

The navbar at the top of the page remains in place and obscures

I am facing an issue where my fixed navbar code breaks up into individual boxes for the links when I try to scroll, covering the page title. How can I resolve this? My code is too long to post directly here, so it's available on pastebin at the follow ...

htmlcsstwitter-bootstrapnavbar

differences in rendering of flexbox align-items: center between Chrome and Firefox

As I was attempting to center a div inside another div using flexbox, an inconsistency in rendering between Firefox and Chrome caught my attention. In the scenario, there are 3 divs, each with properties display:flex, justify-content:center, and align-ite ...

htmlcssflexbox

Managing Image Quality with Unsplash API

How can we ensure high quality images are embedded on the web using Unsplash API or other methods? The image displayed in the example below appears blurry and unclear compared to the original image. Original Image link: Example of embedding the image abo ...

javascripthtmlcssapi

Is it possible to configure Nginx mime types within a Docker container?

My docker-compose.yml file looks like this: version: "1.0" services: web: container_name: webserver image: nginx volumes: - ./nginx.conf:/etc/nginx/nginx.conf:ro - ./frontend:/frontend ports: - "8001:80&qu ...

javascriptcssnginxwebserverstatic-files

Is it possible to adjust CSS values in a relative manner?

#bar{font-size:14px;} The font size of #bar is set to 14px. #foobar{font-size:$-2px} // Fictional code The font size of #foobar is now 12px. (calculated as 14px - 2px) Is there a way to dynamically alter the value of a selector like this? ...

htmlcss

Store <td> in a variable

At the moment, I have a script that allows users to input an item name, along with its size, color, and other options. Each of these entries is saved as individual items with their custom specifications, such as a black t-shirt in large size. The script c ...

javascriptjqueryhtmlcssjquery-ui

css code creates a stable block with a blurred transparent effect

I need assistance with creating a transparent fixed header using only CSS and no JS. I attempted to use ::before for creating a blur effect with a negative z-index, but so far, my attempts have failed. I know how to achieve this using jQuery, but I am spec ...

htmlcssfilterblur

Ways to eliminate shadows in the Material-UI design scheme

How can I remove shadows in the MuiPaper component? I came across a solution: here However, the solutions provided did not work for me. I am only able to override the root component (MuiPaper) but the shadow is controlled by the class MuiPaper-elevation ...

reactjsmaterial-designmaterial-uireact-admin

Tips for optimizing large image files on a basic HTML, CSS, and JavaScript website to improve site speed and ensure optimal loading times

Currently, my site is live on Digital Ocean at this link: and you can find the GitHub code here: https://github.com/Omkarc284/SNsite1. While it functions well in development, issues arise when it's in production. My website contains heavy images, in ...

javascripthtmlcssuser-interfacegsap

Tips for adjusting the color of a pin without altering anything else

I have a Google Marker with a default design. By default, I can create the pin with letters inside it. However, I want to change the color of this pin. So, I attempted to use this icon: https://i.sstatic.net/gFXMR.png Unfortunately, the letters shifted ...

javascripthtmlcssgoogle-maps

Incorporate text inside the border of a Material UI chip

https://i.stack.imgur.com/VATrD.png I'm looking to replicate this design using a pre-built Chip component from MaterialUI While the solution might involve Some Text using html and css, it still may not achieve an identical result. I've come acr ...

cssreactjsmaterial-ui

Display my search box when the button is activated

I have a button labeled "Search" that I want to click in order for my search field (which is currently hidden with display:none) to become visible. However, my current setup is not working as intended. I have created a jsfiddle to illustrate my issue. Al ...

htmlcssmodx

JavaScript appends a backslash character to a CSS class

I am attempting to populate index.html with the contents from an array using a JavaScript loop. However, I am encountering an issue where a CSS class for picture formatting is displaying some odd characters when rendered in the latest version of Firefox. ...

javascripthtmlcssbootstrap-4

Tips for horizontally aligning an item in a flexbox only when it wraps onto a new line

In my layout, I have a container that consists of text on the left and a button on the right. The challenge I'm facing is ensuring proper alignment when they are on the same line versus when the button wraps to a new line on smaller screens. Ideally, ...

htmlcssflexbox

Difficulty in implementing jQuery accordion height style using either content or fill option

What I am looking for is to have only one specific div in my accordion (device properties) change its height based on the content. I have also noticed that if I use Firebug to remove the height property of the device div, it adjusts the height correctly. ...

javascriptjqueryhtmlcss

"Using the d-flex class with Bootstrap 4 tables does not allow them to expand to

Since the latest version of Bootstrap 4, it has become more challenging to apply classes like col-md-2 directly to the tr or td elements of a table. A possible solution is to use class="d-flex" in the parent element: <tr class="d-flex"> However, w ...

htmlcssbootstrap-4widthcolumn-width

Issues with JQuery OnClick Function Detected

I am struggling with an issue related to the scripts in the <head> section of my website: <script src="scripts/jquery-1.11.0.min.js" type="text/javascript"></script> <script> $('#submit').click(function() { $('#submi ...

jquerycssbackground-image

My CSS seems to be causing issues and generating errors in the console. What could be the problem?

My CSS was working fine just 5 minutes ago, but now it's not working and I'm not sure what the issue is. I checked the console and found this error: bootstrap.min.js:6 Uncaught TypeError: Cannot read property 'fn' of undefined at bo ...

javascriptcssbootstrap-4