Styling navigation for big screens

[Gauravjeetsingh]

I have already shared mockup of how our navigation would look in big screens. So this issue is to style that design in scss. No effects yet, first commit to the desired horizontal navigation, after that we can think of effects.

Some suggestions while designing in scss: 1) Make a separate file say options.scss, and initialize all the variables in that file. This file can then be included in main scss file by @import 'options';

2) Have a look at this guide http://sass-lang.com/guide and create an efficient sass code.

For adding the Ishwerdas logo. The logo is simple text [ iIi ] in playfair display" font and size 50px.

[Gauravjeetsingh]

Done styling horizontal navigation. Checkout my recent commit

[Gauravjeetsingh]

I have styled horizontal navigation, but we don't have any css effects on it. @Bravy you can add CSS effects in it.

Basically only one effect is required in horizontal navigation, that on hover the change in color should occur with fade effect. You have to use CSS to add this fade effect.

[Bravy]

Okkay i'll do it. But don't you think there is so much space between logo and menu items??

[amitojsingh]

@Bravy I think its fine. :)

[Gauravjeetsingh]

Actually I felt the same :P So fixed the space issue. See my recent commit.

[Gauravjeetsingh]

@Bravy do changes in code after pulling my recent commit. git pull origin master

[Bravy]

Done with fade effect. just check it out

[Gauravjeetsingh]

@Bravy In your recent commit you changed style.css, which is not the required file. All the work is to be done in .scss files and then be converted to css file.

[Bravy]

Sorry. I'll do it again

[Bravy]

Done.

[Gauravjeetsingh]

Here's few things First of all there shouldn't be any css file in SCSS folder. Compile sass in root folder by sass SCSS/style.scss style.css

Regarding animation You need to make it cross browser compatible. See the following link for compatibility https://css-tricks.com/almanac/properties/t/transition/ Create a sass mixin for implementing it. See the following link on how to create and use a mixin http://sass-lang.com/guide The mixin should be defined in options.scss And duration should be passed as a parameter to it.

[Bravy]

I am done with Mixins for animation :+1: Only left navbar animation is left. @amitojsingh are you working on it ??

[Gauravjeetsingh]

@Bravy What about cross browser compatibility ? For making it cross browser compatible, you need to add the following lines in your mixin -webkit-transition: 1s ease; -moz-transition: 1s ease; -o-transition: 1s ease; transition:1s ease;

Right now your mixin contain only transition: 1s;

[Bravy]

I pushed it again check it out.

[amitojsingh]

@Bravy I am working on design of mobile menu not on animation

[Bravy]

Fade animation is applied to both horizontal and vertical NavBar. But on click animation is still pending. We have to do it fast Because we have only 45 mins left .