Menu icon Foundation

My Posts





  • 1
    Reply
  • Customizing Nav Bar Foundation 6

    By coralie diatkine

    R

           HI, I have browsed the forum to find solutions to customize my nav bar. Here is what I found, but it doesn't apply to foundation 6.   http://foundation.zurb.com/forum/posts/15899-customizing-top-bar     ... (continued)

    Last Reply by coralie diatkine about 3 years ago







My Comments

coralie diatkine commented on coralie diatkine's post about 3 years

Thank you Rafi
 
I have been able to modify parameters such as the margin successfully, but not the color. 
Besides, on small device mode, the triangle overlaps the menu item text...

See screen captures.
 
Is there anything else that should be modified, and where should I look to change the triangle margin in small device mode? 
Thanks!
Coralie

coralie diatkine commented on Diego Ramirez's post about 3 years

Hi 
I have used Arnaud's solution, and it's perfect! Merci Arnaud :-). However, how would you implement this with a footer? I'm using F6...
 
Thanks!

coralie diatkine commented on coralie diatkine's post about 3 years

Hi,
Thanks a lot.
I have made the changes, and it still won't work. I realized that block was designed for F5, and I'm using F6. Any chance the issue might be related with that?
 
Thanks
 
Coralie

coralie diatkine commented on coralie diatkine's post about 3 years

I noticed a typo in the css (tob instead of top). I have corrected that but it doesn't make any difference.

coralie diatkine commented on coralie diatkine's post about 3 years

Rafi,
 
I have just put the files online
 
http://coraliediatkine.eu/Partenaires.html
 
so you can have a look at it.
 
Thanks for your help!
 
Coralie

coralie diatkine commented on coralie diatkine's post about 3 years

 Hi Rafi, 
 
I have been trying to implement your solution but there is something I don't get. In your exemples the text is not rotated, and I can't seem to make it work using your code. 
 
I am only using CSS, not SCSS.
 
SO far, what I have is: 
<!-- fin colonne gauche début du bloc avec colonnes de 2 et 4 -->
<div class="callout large">

<div class="row medium-8 large-6 columns">

<!-- colonne milieu principale -->

<!-- row pour envelopper l'image et le texte dans 2 colonnes -->

<div class="small-3 columns">
<h5 class="vertical-text1" >TECHNIQUE</h5>
</div>
</div>

<div class="small-9 columns">

<h5>Industrie</h5>
<p>Bla</p>
<h5>Recherche et Développement</h5>
<p> Bla</p>

</div>

<!-- fin row -->
</div>
</div>

<!--nouveau row -->

 
With the following CSS
.vertical-text1 {

transform: rotate(270deg);
transform-origin: 0;
vertical-align: middle;
margin-top: 200px;
margin-left: 50px;
}
 
h5 {
font-family: futura;
text-align: center;

}
 
I only modified the standard h5 style.
It's sort of working, but as soon as I switch to a smaller display the margin is of course not adapted. I am not familiar with html or css and coding in general. I apologize if my questions seem a little naive.

coralie diatkine commented on coralie diatkine's post about 3 years

Thanks, I'll try it. 
You might find that interesting, although I have a problem : the text length affects the box's height. I have pasted my code below.
https://www.jakpsatweb.cz/css/css-vertical-center-solution.html
 
Add this in the header
 
<style>
.greenBorder {border: 1px solid green;}
.redBorder {border: 1px solid red;}
.blueBorder {border: 1px solid blue;}

</style>

then
<div class="row">

<div class="small-2 columns">
<div class="greenBorder" style="display: table; height: 500px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">

<h5 class="vertical-text" > &nbsp; &nbsp; TECHNIQUE &nbsp; &nbsp;</h5>
</div>
</div>
</div>

<div class="small-10 columns">
<div class="blueBorder" style="display: table; height: 500px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="redBorder" style=" #position: relative; #top: -50%">

<h5>Industrie</h5>
<p> Bureaux d'étude acoustique - Régies de transport - Constructeurs automobile et aéronautique - Concepteurs de dispositifs médicaux</p>

<h5>Recherche et Développement</h5>
<p> Laboratoires - Living Labs - Grandes écoles et universités</p>

<h5>Grands Projets </h5>
<p>Pôles de Compétitivité - Collectivités Locales et Territoriales - Porteurs de projets - Etablissements publics </p>

<h5>Espaces et Objets </h5>
<p> Architectes/Architectes d'Intérieur - Urbanistes - Designers - Scénographes - Paysagistes </p>

<h5>Audio</h5>
<p>blabla </p>

</div>
</div>
</div>
</div>

<!-- fin row -->
</div>

coralie diatkine commented on coralie diatkine's post over 3 years

 Hi Raphi,
Thanks you so much.  I'll try that tomorrow. I might have questions, since I don't know if I'll manage integrating it in my function.
 
Coralie

coralie diatkine commented on coralie diatkine's post over 3 years

Thanks a lot for this very thorough answer Glynn. Sorry for the late reply, didn't browse the forum until now. I'll try it and let you know. 
 
It should be very usefull for other effects I'm trying to achieve.
 
Coralie

coralie diatkine commented on coralie diatkine's post over 3 years

Hi Glynn
I am using the image hover building block, and it's working well. But the text is fading in and out. Do you have an idea of a function that would make it slide down?
 
Thanks
 
Coralie

Posts Followed



Following

    No Content

Followers

My Posts

My Comments

You commented on coralie diatkine's post about 3 years

Thank you Rafi
 
I have been able to modify parameters such as the margin successfully, but not the color. 
Besides, on small device mode, the triangle overlaps the menu item text...

See screen captures.
 
Is there anything else that should be modified, and where should I look to change the triangle margin in small device mode? 
Thanks!
Coralie

You commented on Diego Ramirez's post about 3 years

Hi 
I have used Arnaud's solution, and it's perfect! Merci Arnaud :-). However, how would you implement this with a footer? I'm using F6...
 
Thanks!

You commented on coralie diatkine's post about 3 years

Hi,
Thanks a lot.
I have made the changes, and it still won't work. I realized that block was designed for F5, and I'm using F6. Any chance the issue might be related with that?
 
Thanks
 
Coralie

You commented on coralie diatkine's post about 3 years

I noticed a typo in the css (tob instead of top). I have corrected that but it doesn't make any difference.

You commented on coralie diatkine's post about 3 years

Rafi,
 
I have just put the files online
 
http://coraliediatkine.eu/Partenaires.html
 
so you can have a look at it.
 
Thanks for your help!
 
Coralie

You commented on coralie diatkine's post about 3 years

 Hi Rafi, 
 
I have been trying to implement your solution but there is something I don't get. In your exemples the text is not rotated, and I can't seem to make it work using your code. 
 
I am only using CSS, not SCSS.
 
SO far, what I have is: 
<!-- fin colonne gauche début du bloc avec colonnes de 2 et 4 -->
<div class="callout large">

<div class="row medium-8 large-6 columns">

<!-- colonne milieu principale -->

<!-- row pour envelopper l'image et le texte dans 2 colonnes -->

<div class="small-3 columns">
<h5 class="vertical-text1" >TECHNIQUE</h5>
</div>
</div>

<div class="small-9 columns">

<h5>Industrie</h5>
<p>Bla</p>
<h5>Recherche et Développement</h5>
<p> Bla</p>

</div>

<!-- fin row -->
</div>
</div>

<!--nouveau row -->

 
With the following CSS
.vertical-text1 {

transform: rotate(270deg);
transform-origin: 0;
vertical-align: middle;
margin-top: 200px;
margin-left: 50px;
}
 
h5 {
font-family: futura;
text-align: center;

}
 
I only modified the standard h5 style.
It's sort of working, but as soon as I switch to a smaller display the margin is of course not adapted. I am not familiar with html or css and coding in general. I apologize if my questions seem a little naive.

You commented on coralie diatkine's post about 3 years

Thanks, I'll try it. 
You might find that interesting, although I have a problem : the text length affects the box's height. I have pasted my code below.
https://www.jakpsatweb.cz/css/css-vertical-center-solution.html
 
Add this in the header
 
<style>
.greenBorder {border: 1px solid green;}
.redBorder {border: 1px solid red;}
.blueBorder {border: 1px solid blue;}

</style>

then
<div class="row">

<div class="small-2 columns">
<div class="greenBorder" style="display: table; height: 500px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">

<h5 class="vertical-text" > &nbsp; &nbsp; TECHNIQUE &nbsp; &nbsp;</h5>
</div>
</div>
</div>

<div class="small-10 columns">
<div class="blueBorder" style="display: table; height: 500px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="redBorder" style=" #position: relative; #top: -50%">

<h5>Industrie</h5>
<p> Bureaux d'étude acoustique - Régies de transport - Constructeurs automobile et aéronautique - Concepteurs de dispositifs médicaux</p>

<h5>Recherche et Développement</h5>
<p> Laboratoires - Living Labs - Grandes écoles et universités</p>

<h5>Grands Projets </h5>
<p>Pôles de Compétitivité - Collectivités Locales et Territoriales - Porteurs de projets - Etablissements publics </p>

<h5>Espaces et Objets </h5>
<p> Architectes/Architectes d'Intérieur - Urbanistes - Designers - Scénographes - Paysagistes </p>

<h5>Audio</h5>
<p>blabla </p>

</div>
</div>
</div>
</div>

<!-- fin row -->
</div>

You commented on coralie diatkine's post over 3 years

 Hi Raphi,
Thanks you so much.  I'll try that tomorrow. I might have questions, since I don't know if I'll manage integrating it in my function.
 
Coralie

You commented on coralie diatkine's post over 3 years

Thanks a lot for this very thorough answer Glynn. Sorry for the late reply, didn't browse the forum until now. I'll try it and let you know. 
 
It should be very usefull for other effects I'm trying to achieve.
 
Coralie

You commented on coralie diatkine's post over 3 years

Hi Glynn
I am using the image hover building block, and it's working well. But the text is fading in and out. Do you have an idea of a function that would make it slide down?
 
Thanks
 
Coralie

Posts Followed

Following

  • No Content

Followers

  • No Content