Menu icon Foundation

Developer | UK

My Posts







My Comments

Max Drake commented on Max Drake's post over 1 year

Aha! finally sorted it out myself.
@include foundation-dropdown-menu
.is-dropdown-submenu {
position: absolute;
top: 0;
#{$global-left}: 100%;
z-index: 1;

display: none;
min-width: $dropdownmenu-min-width;

border: $dropdownmenu-border;
background: $dropdownmenu-submenu-background;

.dropdown & a {
  padding: $dropdownmenu-submenu-padding;
  border-bottom: 2px solid $pale-blue;
  }
}</code></pre>

Max Drake commented on Max Drake's post over 3 years

Yes!!! Thank you...
I found a coding error when I ran it through the validator :

<div class="clearfix" />

whereas it should have been:

<div class="clearfix"></div>

Max Drake commented on Max Drake's post over 3 years

That's weird.
I just put a stray closing div before the section that I was trying to style, and the the background color setting now works. The stray closing divis genuinely stray, doesn't relate to anything.

Max Drake commented on Max Drake's post over 3 years

Thanks Travis. That hasn't really helped me though, and unfortunately I don't have the project up anywhere as am just prototyping locally at the moment.
I just can't seem to work it out with Foundation. To get my footer spreading right across the full width I've resorted to using the top-bar class, but don't want to have to use that the whole time just to get the background colour to spread to full screen width.

Max Drake commented on Max Drake's post over 3 years

Thanks Travis, I get that. But how would I style that div?
My CSS presently looks like this:
.green-bg {
background-color: #B7CBC1;
width: 100%; }

.green {
padding-left: 1rem; }
.green h3 {
font-size: 1.0rem;
text-transform: uppercase;
text-color: #FFF6D5;
text-shadow: 0px 1px 0px #FFF6D5;
border-bottom: 2px;
border-color: #FFF6D5; }
.green h3 a {
text-color: #00371D; }
the html is this:

```



But the background colour is still not extending to full screen width

Max Drake commented on Max Drake's post almost 4 years

Well, I seem to have sorted this with:

<div class="orbit" role="region" aria-label="Favorite urban Fringe Pictures" data-options="pauseOnHover:false" data-orbit>

Max Drake commented on Max Drake's post almost 4 years

Well, I had to add it to make it work anyway.

Max Drake commented on Max Drake's post almost 4 years

Thanks Brian! That's done the job. So my UL element now looks like this:
HTML
<ul class="dropdown vertical medium-horizontal menu" data-options="disableHover:true;clickOpen:true" data-dropdown-menu>

thanks again.

Max Drake commented on Max Drake's post almost 4 years

Great, that works fine now. Thank you both for sorting me out so quickly. I used Chris's option. thanks again.

Max Drake commented on Max Drake's post almost 4 years

Great, that works fine now. Thank you both for sorting me out so quickly. I used Chris's option. thanks again.

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Max Drake's post over 1 year

Aha! finally sorted it out myself.
@include foundation-dropdown-menu
.is-dropdown-submenu {
position: absolute;
top: 0;
#{$global-left}: 100%;
z-index: 1;

display: none;
min-width: $dropdownmenu-min-width;

border: $dropdownmenu-border;
background: $dropdownmenu-submenu-background;

.dropdown &amp; a {
  padding: $dropdownmenu-submenu-padding;
  border-bottom: 2px solid $pale-blue;
  }
}</code></pre>

You commented on Max Drake's post over 3 years

Yes!!! Thank you...
I found a coding error when I ran it through the validator :

<div class="clearfix" />

whereas it should have been:

<div class="clearfix"></div>

You commented on Max Drake's post over 3 years

That's weird.
I just put a stray closing div before the section that I was trying to style, and the the background color setting now works. The stray closing divis genuinely stray, doesn't relate to anything.

You commented on Max Drake's post over 3 years

Thanks Travis. That hasn't really helped me though, and unfortunately I don't have the project up anywhere as am just prototyping locally at the moment.
I just can't seem to work it out with Foundation. To get my footer spreading right across the full width I've resorted to using the top-bar class, but don't want to have to use that the whole time just to get the background colour to spread to full screen width.

You commented on Max Drake's post over 3 years

Thanks Travis, I get that. But how would I style that div?
My CSS presently looks like this:
.green-bg {
background-color: #B7CBC1;
width: 100%; }

.green {
padding-left: 1rem; }
.green h3 {
font-size: 1.0rem;
text-transform: uppercase;
text-color: #FFF6D5;
text-shadow: 0px 1px 0px #FFF6D5;
border-bottom: 2px;
border-color: #FFF6D5; }
.green h3 a {
text-color: #00371D; }
the html is this:

```



But the background colour is still not extending to full screen width

You commented on Max Drake's post almost 4 years

Well, I seem to have sorted this with:

<div class="orbit" role="region" aria-label="Favorite urban Fringe Pictures" data-options="pauseOnHover:false" data-orbit>

You commented on Max Drake's post almost 4 years

Well, I had to add it to make it work anyway.

You commented on Max Drake's post almost 4 years

Thanks Brian! That's done the job. So my UL element now looks like this:
HTML
<ul class="dropdown vertical medium-horizontal menu" data-options="disableHover:true;clickOpen:true" data-dropdown-menu>

thanks again.

You commented on Max Drake's post almost 4 years

Great, that works fine now. Thank you both for sorting me out so quickly. I used Chris's option. thanks again.

You commented on Max Drake's post almost 4 years

Great, that works fine now. Thank you both for sorting me out so quickly. I used Chris's option. thanks again.

Posts Followed

Following

  • No Content

Followers

  • No Content