4 replies [Last post]
11Edward23
11Edward23's picture
Offline
newbie
Last seen: 8 years 36 weeks ago
Timezone: GMT+1
Joined: 2014-05-20
Posts: 3
Points: 4

Hi there I wonder if you guys can help me decipher why when I add the following code it breaks my navbar (see attached snapshot) and go to www.traditional-cleaning.co.uk to see how it normally looks. All I'm trying to do is add some styling to a list - don't understand, why does this effect the nav bar? I guess it's something to do with some other style clashing

div {
width: 200px;
margin: 30px;
}

h2 {
font: 400 40px/1.5 Helvetica, Verdana, sans-serif;
margin: 0;
padding: 0;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

li {
font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
border-bottom: 1px solid #ccc;
}

li:last-child {
border: none;
}

li a {
text-decoration: none;
color: #000;

-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
-moz-transition: font-size 0.3s ease, background-color 0.3s ease;
-o-transition: font-size 0.3s ease, background-color 0.3s ease;
-ms-transition: font-size 0.3s ease, background-color 0.3s ease;
transition: font-size 0.3s ease, background-color 0.3s ease;
display: block;
width: 200px;
}

li a:hover {
font-size: 30px;
background: #f6f6f6;
}

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 6 years 25 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Try this: /*div { width:

Try this:

/*div {
width: 200px;
margin: 30px;
}*/
h2 {
/*font: 400 40px/1.5 Helvetica, Verdana, sans-serif;
margin: 0;
padding: 0;*/
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
/*font: 200 20px/1.5 Helvetica, Verdana, sans-serif;*/
/*border-bottom: 1px solid #ccc;*/
}
li:last-child {
border: none;
}
li a {
text-decoration: none;
color: #000;
-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
-moz-transition: font-size 0.3s ease, background-color 0.3s ease;
-o-transition: font-size 0.3s ease, background-color 0.3s ease;
-ms-transition: font-size 0.3s ease, background-color 0.3s ease;
transition: font-size 0.3s ease, background-color 0.3s ease;
display: block;
/*width: 110px;*/
}
li a:hover {
font-size: 30px;
background: #f6f6f6;
}

Cheers, Henk

Check Maximum Webdesign for your online solutions

11Edward23
11Edward23's picture
Offline
newbie
Last seen: 8 years 36 weeks ago
Timezone: GMT+1
Joined: 2014-05-20
Posts: 3
Points: 4

Hi Henk, awesome that totally

Hi Henk, awesome that totally worked! May I ask why though? I also wanted to override the styles being applied to to exactly replicate the example here http://codepen.io/pustovalov/pen/Jgptj

Many thanks

11Edward23
11Edward23's picture
Offline
newbie
Last seen: 8 years 36 weeks ago
Timezone: GMT+1
Joined: 2014-05-20
Posts: 3
Points: 4

Actually I've also noticed

Actually I've also noticed that applying this code also effects the size of the menu bar text unfortunately. All I want to do is overwrite the master CSS styling for lists

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 6 years 25 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Try this inside your

Try this inside your css:

/*div {
width: 200px;
margin: 30px;
}*/
.navbar-nav h2 {
/*font: 400 40px/1.5 Helvetica, Verdana, sans-serif;
margin: 0;
padding: 0;*/
}
.navbar-nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar-nav li {
/*font: 200 20px/1.5 Helvetica, Verdana, sans-serif;*/
/*border-bottom: 1px solid #ccc;*/
}
.navbar-nav li:last-child {
border: none;
}
.navbar-nav li a {
text-decoration: none;
color: #000;
-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
-moz-transition: font-size 0.3s ease, background-color 0.3s ease;
-o-transition: font-size 0.3s ease, background-color 0.3s ease;
-ms-transition: font-size 0.3s ease, background-color 0.3s ease;
transition: font-size 0.3s ease, background-color 0.3s ease;
display: block;
/*width: 110px;*/
}
.navbar-nav li a:hover {
font-size: 20px;
background: #f6f6f6;
}

Now I am specifying to use these codes specifically on the navbar-nav class.
That is the class you specified to your menu.

At first your own code you used before will be used on everything with H2 on your website.
The div command was going to be used on every div inside your website.

So imagine all your div's changing width to 200px, that would realy ruin your design.
To specify which div you want to smaller you have to call it by it's class or ID.
Your menu has for example class: .navbar-nav

Hope this helps you a bit.

Check Maximum Webdesign for your online solutions