/* *************************************************************************************************************************** */
/* SECTION 1 STARTS: It contains the CSS for top red bar that streaches across the screen. */
/* SECTION 1 ENDS: It contains the CSS for top red bar that streaches across the screen. */
/* *************************************************************************************************************************** */
/* *************************************************************************************************************************** */
/* SECTION 1 STARTS: It contains the CSS for top red bar that streaches across the screen. */
#top_bar{
background-color: #153E4D;
color: white; /* EVERY TEXT IN THE DIV WITH THIS ID WILL HAVE A COLOR OF WHITE */
}
/* */
/* SECTION 1 ENDS: It contains the CSS for top red bar that streaches across the screen. */
/* *************************************************************************************************************************** */
.sex{
/* background-image: url('../img/background_image_1.jpg'); */
width: 100%;
/* opacity: 0.2; */
background-color: yellow;
}
/* *************************************************************************************************************************** */
/* SECTION 2 STARTS: It contains the CSS for LOGO, SEARCH FORM AND LOGIN BUTTON */
#logo_bar{
background-color: #153E4D;
padding-bottom: 0px;
margin-bottom: 0px;
}
#logo{
height: 80px; /* The logo with this class will have a width and height of 25 px */
width: 80px;
}
#logo_text{
font-size: 26px; /* Good Cakes Cafe logo text will have a font size of 26 px */
font-family: cursive; /* Good Cakes Cafe logo text will be cursive */
}
/* SECTION 2 ENDS: It contains the CSS for LOGO, SEARCH FORM AND LOGIN BUTTON */
/* *************************************************************************************************************************** */
/* *************************************************************************************************************************** */
/* SECTION 3 STARTS: It contains the CSS for Carousel Bar */
#carousel_bar{
background-image: url("../img/carousel_background.png"); /* REFERS TO THE IMAGE THAT WILL BE USED FOR SETTING THE BACKGROUND */
}
/* SECTION 3 ENDS: It contains the CSS for Carousel Bar */
/* *************************************************************************************************************************** */
/* *************************************************************************************************************************** */
/* ********************* NAV BAR CSS STARTS : SECTION 3 ************************************************************** */
/* NAV BAR CSS STARTS : SECTION 4 */
/* This imports Google Roboto fonts */
@import url('https://fonts.googleapis.com/css?family=Roboto');
/* Box-sizing gives border property to the html elements. */
*{
box-sizing: border-box;
}
/*
a) The first parameter for margin is 0 and it indicates that the top and bottom margins will both be set to 0.
b) Specifying auto as the second parameter for margin basically tells the browser to automatically determine the left and right margins itself, which it does by setting them equally. It guarantees that the left and right margins will be set to the same size. It works only for block level elements.
c) The width of the entire nav bar will equal 1000 px. But not more. The menu bar is not responsive.
*/
.bucket{
max-width: 1000px;
margin: 0 auto;
}
/* This will define the color of the nav bar strip to blue. */
nav{
background: #19bcdb;
font-weight: 100 !important;
}
/*
1) The margin property will remove any distance between the parent container which happens to be the body
2) The padding will remove any spacing between li elements. This is important. If we do not include the padding property, than there will be visible distance between them when they are stacked horizontally
3) The list style (none) removes the bullets of li
4) It is important that the ul has a property of relative. This will allow its child elements which will be the li elements, and then further drop down menu to be positioned w.r.t. to the ul tag(by having absolute property).All their positioning is made possible by having ul as relative property.
*/
nav ul{
margin: 0;
padding: 0;
list-style: none;
position: relative;
text-align: left;
}
/*Right now the list items are stacked on top of each other. We want them to be adjacent to each other. It can be done in many ways. It can be done through float left.
However, inline block is more versatile even though it puts space between li items
*/
nav li{
display: inline-block;
}
nav a{
color: #fff !important; /* The color of li elements is now white */
text-decoration: none; /* Removes the underline of a elements that are enclosed in the li tags */
display: block; /* Only one a element will now be in a single line. */
padding: .75em 1.75em;
/* padding: .75em 1.75em;*/
font-weight: 1 !important;
font-family: cursive !important;
}
nav li:hover a{
color: #fff; /* On hovering, the color of the font of a element will be white */
}
nav li:hover{
background: #ec5b42; /* On hovering over li element, the color of the background will be blue */
}
/* -----------------CSS starts for mega menu -------------------------------- */
.menu-sub{
position: absolute; /* This ensures that the sub menu is positioned relative to the li element(which has the first L0 category - like home, about us (enclosed in tag) When we use the block property on .menu-sub it will automatically position all the content of the .menu-sub below the tag (and that means below the root navbar elements like home, about us, services, specialities) */
left: 0; /* This ensures that the sub menu starts from extreme left (aligned from the same point from where the page starts in horizontal direction. If this is not present than the sub menu will be positioned directly below the root navbar elements (like home). This is not what we want in case of mega menu. However, we would want this in case of a simple drop down menu. In that case we will need to remove this css property. And this is exactly what we do in menu-sub_2 where we do not need a mega menu but a simple drop down menu */
background: #ec5b42 ; /* This defines the background color of the sub menu. */
width: 100%; /* This forces the mega menu to span the entire width of the page */
display: none; /* This forces the .mega menu to remain hidden. We want it to open up only in case of hover. */
color: #fff; /* This defines the font color */
padding: 2em; /* This defines the padding dimensions */
z-index: 1000; /* This ensures that the drop-down menu has primacy in the stack order display of HTML elements in the page. Otherwise other elements were showing/interfering on top of drop-down menu and spoiling the display. It was making the drop-down menu look transparent. */
}
nav li:hover .menu-sub{
display: block; /* On hovering over li element, the div with .sub-menu class will pop below the tag with root navbar elements (like home) */
}
.menu-sub li{
display: block; /* Individual li elements in the .menu-sub have bloc property which forces them to start on the next line. */
}
/* In the div with .sub-menu class, there are li elements which further encloses elements. This is because they link up to a different page. We of course want to remove the text decoration and padding of these elements so that they look decent in the mega menu dropdown. */
.menu-sub a{
padding: 0;
margin-bottom: .25em;
}
/* In the div with .sub-menu class, there are li elements which further encloses elements. This is because they link up to a different page. In case a user hover these elements in the mega menu, we want an underline to appear to just let the user know. */
.menu-sub a:hover{
text-decoration: underline;
}
/* The .menu-category is the class given to those