Contrib.social

Eliminate white space or adjust padding

Open on Drupal.org →
Created on 12 April 2012, about 12 years ago
Updated 2 May 2024, about 2 months ago

Print screen of problem:
http://img684.imageshack.us/img684/9016/capturew.gif

As you can see from the picture, my Nice Menu does not expand all the way across the site or all the way up. The problem with it going up to the top of my header is theme related and we can address that later (I hope).

What I was wondering is if there was something I could change in the CSS to make the menu span the full width of the page. By either creating empty purple space to the right or by adding padding to all of the links. I would prefer to add purple space.

Here is the code I've changed so far:

nice_menu.css

/*
  This file contains the basic logic for nice menus, and should not be
  edited.  To customize the menus, it's recommended to create a custom CSS
  file using nice_menus_default.css as a template, then configure the module
  to use your custom CSS file (this is done in the global settings tab of
  the theme administration.)
*/

/* Below should fix menu being a few pixels away in some themes, and menus disappearing behind other stuff. */
.block-nice-menus {
  line-height: normal;
  z-index: 10;
}

ul.nice-menu,
ul.nice-menu ul {
  z-index: 5;
  position: relative;
}

ul.nice-menu li {
  position: relative;
}

ul.nice-menu a {
  display: block;
  /*Default to Blue, but override as necessary*/
  color: #FFFFFF;

}


ul.nice-menu ul,
/* For Garland header. */
#header-region ul.nice-menu ul {
  position: absolute;
  visibility: hidden;
}

ul.nice-menu li.over ul {
  visibility: visible;
}

ul.nice-menu ul li {
  display: block;
}

ul.nice-menu:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* Show submenus when over their parents. */
ul.nice-menu li:hover ul,
ul.nice-menu li.menuparent li:hover ul,
ul.nice-menu li.menuparent li.menuparent li:hover ul,
ul.nice-menu li.menuparent li.menuparent li.menuparent li:hover ul,
ul.nice-menu li.over ul,
ul.nice-menu li.menuparent li.over ul,
ul.nice-menu li.menuparent li.menuparent li.over ul,
ul.nice-menu li.menuparent li.menuparent li.menuparent li.over ul,
/* Repeat all this stuff just for Garland headers. */
#header-region ul.nice-menu li:hover ul,
#header-region ul.nice-menu li.menuparent li:hover ul,
#header-region ul.nice-menu li.menuparent li.menuparent li:hover ul,
#header-region ul.nice-menu li.over ul,
#header-region ul.nice-menu li.menuparent li.over ul,
#header-region ul.nice-menu li.menuparent li.menuparent li.over ul {
  visibility: visible;
}

/* Hide sub-menus initially. */
ul.nice-menu li:hover ul ul,
ul.nice-menu li:hover ul ul ul,
ul.nice-menu li:hover li:hover ul ul,
ul.nice-menu li:hover li:hover ul ul ul,
ul.nice-menu li:hover li:hover li:hover ul ul,
ul.nice-menu li:hover li:hover li:hover ul ul ul,
ul.nice-menu li.over ul ul,
ul.nice-menu li.over ul ul ul,
ul.nice-menu li.over li.over ul ul,
ul.nice-menu li.over li.over ul ul ul,
ul.nice-menu li.over li.over li.over ul ul,
ul.nice-menu li.over li.over li.over ul ul ul,
/* Repeat all this stuff just for Garland headers. */
#header-region ul.nice-menu li:hover ul ul,
#header-region ul.nice-menu li:hover ul ul ul,
#header-region ul.nice-menu li:hover li:hover ul ul,
#header-region ul.nice-menu li:hover li:hover ul ul ul,
#header-region ul.nice-menu li:hover li:hover li:hover ul ul,
#header-region ul.nice-menu li:hover li:hover li:hover ul ul ul,
#header-region ul.nice-menu li.over ul ul,
#header-region ul.nice-menu li.over ul ul ul,
#header-region ul.nice-menu li.over li.over ul ul,
#header-region ul.nice-menu li.over li.over ul ul ul,
#header-region ul.nice-menu li.over li.over li.over ul ul,
#header-region ul.nice-menu li.over li.over li.over ul ul ul {
  visibility: hidden;
}

/***************
 IE 6 Fixes
***************/

/* Iframe to fix z-index bug when menu hovers over <select> fields. */
ul.nice-menu li.menuparent ul,
/* For Garland header. */
#header-region ul.nice-menu li.menuparent ul {
	overflow: visible !important;
	/* overflow: hidden; */
}

ul.nice-menu li.menuparent ul iframe,
/* For Garland header. */
#header-region ul.nice-menu li.menuparent ul iframe {
	display: none;
	display/**/: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	filter: mask();
	width: 20px;
	height: 20px;
}

nice_menus_default.css

/*
  This is the default layout template for nice menus, and will provide
  a starting point for the look of your menus. To customize, it's
  recommended to create a custom CSS file using this file as a template,
  then configure the module to use your custom CSS file
  (this is done in the global settings tab of the theme administration.)

  See README.txt and the handbook page (http://drupal.org/node/185543)
  for more information on using the CSS.
*/

/******************************
 Global CSS for ALL menu types
******************************/

ul.nice-menu,
ul.nice-menu ul {
  list-style: none;
  padding: 0px;
  margin: 0;
  border-top: 1px solid #4B116F;
}

ul.nice-menu li {
  border: 1px solid #ccc;
  border-top: 0;
  float: left; /* LTR */
  background-color: #4B116F;
}

ul.nice-menu a {
  padding: 0.3em 5px 0.3em 5px;
}

ul.nice-menu ul {
  top: 1.8em;
  left: -1px; /* LTR */
  border: 0;
  border-top: 1px solid #4B116F;
  margin-right: 0; /* LTR */
}

ul.nice-menu ul li {
  width: 12.5em;
}



/******************************
 HORIZONTAL (down) menus
******************************/

ul.nice-menu-down {
  float: left; /* LTR */
  border: 0;
}

ul.nice-menu-down li {
  border-top: 1px solid #4B116F;
}

ul.nice-menu-down li li {
  border-top: 0;
}

ul.nice-menu-down ul {
  left: 0; /* LTR */
}

ul.nice-menu-down ul li {
  clear: both;
}

ul.nice-menu-down li ul li ul {
  left: 12.5em; /* LTR */
  top: -1px;
}

ul.nice-menu-down .menuparent a {
  padding-right: 30px; /* LTR */
}

ul.nice-menu-down li.menuparent {
  background: #4B116F url(arrow-down.png) right center no-repeat; /* LTR */
}


ul.nice-menu-down li:hover {
	background-color: #fdd400;
}

/*Get UNI Yellow then only middle dividers not top and bottom*/

/* ul.nice-menu-down li.menuparent:hover {
  background-color: #fdd400;
  font-color: #4B116F;
}

ul.nice-menu-down li.menuparent:hover {
  background: #fdd400 url(arrow-down.png) right center no-repeat; /* LTR */
}


/******************************
 Garland-specific CSS
******************************/

/**
 * Global CSS for ALL menu types
 */
ul.nice-menu li {
  margin: 0;
  padding-left: 30px; /* LTR */
  background-image: none;
}

#header-region ul.nice-menu li {
  margin: 0;
  /* Padding rules are needed to deal with Garland's header line-height. */
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  background: #4B116F;
}

#header-region ul.nice-menu ul {
  top: 1.8em;
  left: -1px; /* LTR */
  border: 0;
  border-top: 1px solid #4B116F;
  margin-right: 0; /* LTR */
}

#header-region ul.nice-menu ul {
  top: 1.7em;
}

/**
 * HORIZONTAL (down) menus
 */
#header-region ul.nice-menu-down li ul li ul {
  left: 12.5em; /* LTR */
  top: -1px;
}

#header-region ul.nice-menu-down li.menuparent {
  background: #4B116F url(arrow-down.png) right center no-repeat; /* LTR */
}

#header-region ul.nice-menu-down li.menuparent:hover {
  background: #4B116F url(arrow-down.png) right center no-repeat; /* LTR */
}

nice_menus_default-rtl.css

ul.nice-menu,ul.nice-menu ul
{
  border-top: 1px solid #ccc;
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.nice-menu li
{
  background-color: #4D0A77;
  border: 1px solid #ccc;
  border-top: 0;
  float: right;
}

ul.nice-menu a
{
  padding: 0.3em 5px 0.3em 5px;
}

ul.nice-menu ul
{
  border: 0;
  border-top: 1px solid #ccc;
  margin-left: 0;
  right: -1px;
  top: 1.8em;
}

ul.nice-menu ul li
{
  width: 12.5em;
}

ul.nice-menu-right,ul.nice-menu-left,ul.nice-menu-right li,ul.nice-menu-left li
{
  width: 12.5em;
}

ul.nice-menu-right ul
{
  right: 12.5em;
  top: -1px;
  width: 12.5em;
}

ul.nice-menu-right ul ul
{
  right: 12.5em;
  top: -1px;
  width: 12.5em;
}

ul.nice-menu-right li.menuparent,ul.nice-menu-right li li.menuparent
{
  background: #4D0A77 url(arrow-right.png) right center no-repeat;
}

ul.nice-menu-right li.menuparent:hover,ul.nice-menu-right li li.menuparent:hover
{
  background: #4D0A77 url(arrow-right.png) right center no-repeat;
}

ul.nice-menu-left li ul
{
  right: 12.60em;
  top: -1px;
  width: 12.5em;
}

ul.nice-menu-left li ul li ul
{
  right: 12.60em;
  top: -1px;
  width: 12.5em;
}

ul.nice-menu-left li.menuparent,ul.nice-menu-left li li.menuparent
{
  background: #4D0A77 url(arrow-left.png) left center no-repeat;
}

ul.nice-menu-left li.menuparent:hover,ul.nice-menu-left li li.menuparent:hover
{
  background: #4D0A77 url(arrow-left.png) left center no-repeat;
}

ul.nice-menu-left a,ul.nice-menu-left ul a
{
  padding-right: 30px;
}

ul.nice-menu-down
{
  border: 0;
  float: right;
}

ul.nice-menu-down li
{
  border-top: 1px solid #ccc;
}

ul.nice-menu-down li li
{
  border-top: 0;
}

ul.nice-menu-down ul
{
  right: 0;
}

ul.nice-menu-down ul li
{
  clear: both;
}

ul.nice-menu-down li ul li ul
{
  right: 12.5em;
  top: -1px;
}

ul.nice-menu-down .menuparent a
{
  padding-left: 30px;
}

ul.nice-menu-down li.menuparent
{
  background: #4D0A77 url(arrow-down.png) right center no-repeat;
}

ul.nice-menu-down li.menuparent:hover
{
  background: #4D0A77 url(arrow-down.png) right center no-repeat;
}

ul.nice-menu-down li li.menuparent
{
  background: #4D0A77 url(arrow-right.png) right center no-repeat;
}

ul.nice-menu-down li li.menuparent:hover
{
  background: #4D0A77 url(arrow-right.png) right center no-repeat;
}

ul.nice-menu li
{
  background-image: none;
  margin: 0;
  padding-right: 30;
}

#header-region ul.nice-menu li
{
  background: #4D0A77;
  margin: 0;
  padding-bottom: 0.1em;
  padding-top: 0.1em;
}

#header-region ul.nice-menu ul
{
  border: 0;
  border-top: 1px solid #ccc;
  margin-left: 0;
  right: -1px;
  top: 1.8em;
}

#header-region ul.nice-menu ul
{
  top: 1.7em;
}

#header-region ul.nice-menu-down li ul li ul
{
  right: 12.5em;
  top: -1px;
}

#header-region ul.nice-menu-down li.menuparent
{
  background: #4D0A77 url(arrow-down.png) right center no-repeat;
}

#header-region ul.nice-menu-down li.menuparent:hover
{
  background: #4D0A77 url(arrow-down.png) right center no-repeat;
}

#header-region ul.nice-menu-down li li.menuparent
{
  background: #4D0A77 url(arrow-right.png) right center no-repeat;
}

#header-region ul.nice-menu-down li li.menuparent:hover
{
  background: #4D0A77 url(arrow-right.png) right center no-repeat;
}
📌 Task
Status

Closed: outdated

Version

2.0

Component

Browser Compat

Created by

🇺🇸United States glass05

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024