Menu items chopped off in smallest screen resolution

  • Resolved DGLauren

    (@dglauren)


    9 years, 11 months ago

    I only have two menu items under a sub-domain’s header image. They are centered under the image, but when reduced to the smallest screen size, the hover caption ‘Menu’ is too low on the page, and the text boxes for the page names are too small, showing only the first two or three letters of the menu item.

    Could someone please show me where to find this and alter it in the code for this part? Thank you in advance for any help you can give.

    (I promise once this is completely finished to take an online course on using Firebug or Chrome’s ‘Inspect Element’ so I won’t keep asking questions which should be obvious to me, at this point.)

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter DGLauren

    (@dglauren)

    Oops. Forgot to add the site address:
    https://www.surrealprimitive.com

    Hi DGLauren. Wondering if you got this fixed. Just checked your site and it looks like the expanded menu on the mobile view is showing all the menu items.

    Thread Starter DGLauren

    (@dglauren)

    Hi, bdbrown! You were very helpful to me before when I was working to finish this site. Thanks for responding. I made a mistake in linking to the main site instead of the sub-domain. Here’s the correct address:
    https://www.raffus.surrealprimitive.com

    My apologies!

    It’s related to the way the menu items and icon are centered. Give this a try and see how it works:

    1. Change the current css to center the menu:

    /* center menu under logo */
.nav-container {
  /* width: 10%; */
  /* margin: 0 auto; */
  text-align: center;
}

    2. Center the menu and position the container so we can align the pseudo-elements:

    /* center menu under logo */
.nav-toggle {
  float: none;
  margin: 0 auto;
  position: relative;
}

    3. Center the menu icon on mobile:

    /* move menu icon left half the width */
.nav-toggle .fa-bars:before {
  content: "\f0c9";
  left: 50%;
}

    4. Add a right margin to the hover element to center it under the icon:

    /* position text under icon */
#nav-header .nav-toggle :hover:after{
  position: absolute;
  right: 0;
  bottom: -26px;
  content: "Menu";
  font-size: 12px;
  color: #000;
  background: #ffffff;
  padding: 3px 6px;
  margin-right: 12px;
}

    You can read more in this thread.

    Thread Starter DGLauren

    (@dglauren)

    Oooh! Pretty!

    When I grow up, I want to be just like you!! Since you speak code so eloquently, I definitely want to at least speak your language. Of course it worked, and perfectly! How do you do that?

    Thank you x 1,000!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Menu items chopped off in smallest screen resolution’ is closed to new replies.