I’m having problems with a nav bar. There are 2 drop buttons; both are rounded and both show up as rounded buttons when I hover over them. I’m unbale to get them to match the other plain buttons.
There are about 12 buttons on the page (add to basket etc). The two in the nav bar need to be different.
I’ve searched my css files and can’t find anywhere that decorates the buttons in the nav bar.
I’ve tried creating new divs, renaming them and putting the style code in the html div but nothing happens.
Am I missing something? What do I need to do to correct it.
I’ve put a codepen url below but I am not using it for editing. The nav bar has disappered and I can’t find a way to get it to show.
you can also see the code from my website url: It’s a srcuffy nav bar - it makes it easier for you to see the problem. I’ll sort it out later.
You have appled the border radius to the button element in your CSS. This will make any button have round corners.
It could be overridden in the dropbtn class, but really you should not apply it globally to all buttons unless you want round corners on all buttons. It’s best to apply the effect to specific classes that want it.
Also, should those even be button elements? There is no click action so I don’t see why they should be buttons.
Learn to use the Inspect tools in your browser, these are a must for diagnosing issues like this.
As Sam said you should avoid styling thigs globally as that affects everything. Its like saying div {background:red} and then wondering why all the divs are red
If you highlight the element in the devtools window all the css that applies to it will be shown to you and you can see which of your css is targeting that element. I inspected the button element in your nav and it showed me that it was getting a load of styles from its .dropbtn rules but also from the block of code I just pasted above (which was the cause of the prolem).
It does take a bit of practice to get to grips with devtools but they are a life saver and I use them constantly.
I haven’t tried your code yet. I will do this evening.
I clicked on ddeveloper tools. I’m already using it. It vtook me some time to find out a possible cause which could be a memory problem. I will try your code first and get back to you.
In a nutshell. I thought becuase the HTMl was as per developer view that the css was. However it’s not the case.
I changed the colour button colour from lightgrey to red in order to see if the code was wrong. The buttons in the navbar changed to red but not the others. I changed the colour back to lightgrey. The buttons remained red.
I hunted everywhere in the code to find if I missed somewhere and then went back to check the developer. This time I noticed that the CSS code was still showing color:red; and not color: lightgrey;
I thought it was a memory problem but couldn’t find a way to clear the apps memory. Years ago when I was teaching myself html from a book I was able to clear the cache by typing cache in the search bar in the nav bar. It’s not the case today. It seems that I have to close the app and go back into it.
I closed the app last night and just reopened it. The red buttons are still there. I learned that this problem wasn’t memory related.
I’ve cleared my browser cache and do that several times when I am coding.
I will use your code now. I just wanted to see if I could solve the problem.
Part of my lack of understanding is that I have another page with the same number of buttons and the same code (I changed the text) and have not had any problems.
You either need to cancel out those properties from within .dropbtn{} styles (which is not good practice) or do as I said and set up a class for all other buttons and use that glass and not the global button name.
It is unlikely that you want all submit inputs styled the same either so you should set up a class for those also.
Its good that you are trying to solve for yourself and we encourage that but when two well established members have pointed to the same items causing the problem your energy in this case would be better spent in looking in that direction
Most of the work that I did was before I got your replies. I have been working on your advice this afternoon.it hasn’t worked. Maybe, I don’t understand.
I can’t use codepen anymore as their navbar has gone. I don’t know how and despite searching codepen docs and google, I’ve been unable to find a way of returning to it.
Probably bad design… I found instructions on how to get full screen view but the icon that you had to press disappears when you are in full screen view. I can’t see how to switch it off.
I used the dropbutton.addtocart code it worked but the border remained. I put in the comment marks to exclude the border but they remain. I decided to try and rewrite the button code using the same principle;
I changed the background colour to red to check the working of the code it works.
But, as you can see the border’s still remain.
The view in codepen now is with button .addtocart code. I’ve comented the button.navbarr code out. This view shows the colour not changing to lightgrey as well as the borders which are commented out.
I’ve tried developer tools in codepen by selecting it from google menu. It only show’s codepen’s own code and not mine!
Becuase of the navbar problem, I am using visual code! with google developer tools.
In google dev tools it’s showing that the nav buttons are being created from button, input. It’s also using the border code which is commented out. If I click on the box next to the css border line the borders disappear.
I was going to show you the code but the boxes don’t cut and paste.
I’ve sorted this now. I just inserted - border-style:none;
Seems strange that I have to include this when there shouldn’t be a border in the first place.
I have another problem which is a grid conatiner isn’t showing as a block. I’ll read through some stuff again to see if I have missed something.
In Chrome you can see a border, a background color, a border-radius and padding.
That comes from teh default User Agent stylesheet that I mentioned in my last post. Here are all the styles that apply to a button element in Chrome when there is no user css at all.
There are quite a few elements in css that have default css applied to them in order for them to display without css being added. Most form elements have a host of styling added to them and even elements like body, h1, h2 etc, p, ul, ol have either margins padding or both.
That’s why you really need to practice and become familiar with devtools so that you can immediately see what styles are applied and where they are coming from.
