Navigation Button Changes

  • Resolved lf designs

    (@lf-designs)


    11 years, 3 months ago

    Dear all,

    I’ve made a few changes to the main navigation button which appears when the width is reduced.

    This is what I’ve done so far by taking code from here and there in this forum and the snippets.

    /* add "menu" text to navigation button */
.btn-navbar {
	width: 90px;
	height: 30px;
	vertical-align: top;
}
.btn-navbar:after {
content: "Menu";
font-family:    Giro-Light;
font-size:      1.5em;
font-weight: 	normal;
font-style: 	normal;
margin: 0px 0px 0px 25px;
}

/* menu button changes */
.navbar .btn-navbar {
    background-color: #009999;
    background-image: none;
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.075);
    box-shadow: none;
    color: white;
    float: right;
    margin-left: 5px;
    margin-right: 5px;
    padding: 7px 10px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.navbar .btn-navbar:hover,
.navbar .btn-navbar:focus,
.navbar .btn-navbar:active,
.navbar .btn-navbar.active,
.navbar .btn-navbar.disabled,
.navbar .btn-navbar[disabled] {
  color: white;
  background-color: #006666;
  *background-color: #006666;
}

    Here is the site.

    The problem is with the added “menu” text.

    /* add "menu" text to navigation button */
.btn-navbar {
	width: 90px;
	height: 30px;
	vertical-align: top;
}
.btn-navbar:after {
content: "Menu";
font-family:    Giro-Light;
font-size:      1.5em;
font-weight: 	normal;
font-style: 	normal;
margin: 0px 0px 0px 25px;
}

    It’s misaligned and I can’t seem to change anything changing the margin values, (except the forth). Is something wrong with the syntax?

    I suppose my whole stylesheet must be a grammatical disgrace for you guys though!

    thanks for your help,

    daniel

Viewing 4 replies - 1 through 4 (of 4 total)

  • You missed a bit of code:

    .btn-navbar:after {
  content: "Menu";
  display: inline;
  float: right;
  font-family: Giro-Light;
  font-size: 1.5em;
  font-style: normal;
  font-weight: normal;
  margin: -14px 0 0 25px;
}

    The float:right and -14px have been added…

    Thread Starter lf designs

    (@lf-designs)

    Thank you very much,

    I had to adjust a couple of things to centre it but it looks fine now I think. Just that it doesn’t have the shadows the lines have so I’m trying to put them in like this:

    .btn-navbar:after {
  content: "Menu";
  display: inline;
  float: right;
  font-family: Giro-Light;
  font-size: 1.5em;
  font-style: normal;
  font-weight: normal;
  margin: -12px -5px 0px 0px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

    But it doesn’t seem to work.

    I’ll mark it as resolved but maybe you could point me in the right direction to shadow the “menu” text as well. Thanks

    daniel

    I think you were close:

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);

    Thread Starter lf designs

    (@lf-designs)

    Thank you very much! A little adjusting and worked fine!

    Thanks!

    daniel

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Navigation Button Changes’ is closed to new replies.