Skip to main content
S
Stephan5FE6
Known Participant
February 9, 2024
Answered

Problem with buttons and links in navbar

  • February 9, 2024
  • 2 replies
  • 1257 views

Hi,

 

I've been learning Dreamweaver for a week now, but I'm struggling to create buttons for the navbar. I've managed to create my unordered list (ul) and list items (li), and applied all the necessary properties.

 

However, I'm having trouble with the :hover selector. I understand why it's not working, but I haven't figured out how to fix it.

 

Following the CSS to create the buttons.

 

The problem is that the colour for the text in ".main-nav ul il" doesn't get applied because the text in the buttons is a link so I have created another selector called ".main-nav ul li a" to apply the colour, up to here all good...

.main-nav ul li  {
    display: inline-block;
    color: #FFFFFF;
    text-decoration: none;
    margin-right: 10px;
    background-color: #878787;
    padding-top: 8px;
    padding-right: 16px;
    padding-left: 16px;
    padding-bottom: 8px;
    border-radius: 12px;

.main-nav ul li a {
    padding-top: 0px;
    text-decoration: none;
    text-align: center;
    color: #FFFFFF;

 

But when I create the hover selector from ".main-nav ul li" and set the background color to change in Orange and the text to change in Black it doesn't work again, of course because the text is a link, so i need to create 2 hover classes but this produce a weird effect when hovering. 

 

Then I have tried to delete ".main-nav ul li" and apply all properties to ".main-nav ul il a" but the property display: inline-block doesn't work in this case and the buttons are displayed as a bullet point list...

 

What can I do to fix this issue? I know is probably an easy fix but I struggle to get there

Thanks in advance for your help

 

 

 

    This topic has been closed for replies.
    Correct answer osgood_

    See if the example code below helps:

     

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example Navigation</title>
<style>
.main-nav {
background-color: #000;
}
.main-nav ul {
margin: 0;
padding: 0;
display: flex;
}
.main-nav ul li {
margin: 0;
padding: 0;
list-style: none;
}
.main-nav ul li a {
text-decoration: none;
background-color: #000;
color: #fff;
display: block;
padding: 10px 15px;
}
.main-nav ul li a:hover {
background-color: orange;
color: #000;
}
</style>
</head>
<body>
<div class="main-nav">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</body>
</html>

     

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    February 10, 2024

    Use Bootstrap.

    File > New > Starter Templates > Bootstrap Templates.  Pick one.  Hit the CREATE button.

    SaveAs index.html

     

    Responsive Navbar in Bootstrap:

    https://getbootstrap.com/docs/4.0/components/navbar/

     

    Nancy O'Shea— Product User & Community Expert
      BenPleysier
      Community Expert
      BenPleysierCommunity Expert
      Community Expert
      February 10, 2024

      Basically, I totally agree with @Nancy OShea in that Bootstrap is the way to go. This provides a responsive navigation bar, complete with a hamburger button for smaller screen sizes.

       

      However, I would deploy the latest version of Bootstrap with all of the enhancements over Bootstrap 4.0. 

      https://getbootstrap.com/docs/5.3/components/navbar/

       

       

      Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
        O
        osgood_
        Legend
        February 10, 2024

        We have no idea what the OP is doing, they might well be considering development as a future career in which case informing them to use a framework before they understand the basics of coding is poor advice leading to a low paying job and low prospects on the other hand if they are a ' Sunday driver' then use whatever means to get the job done. I'm not intending to be a professional chef anytime soon, so if l want to bake a cake I will use a packet of cake mix from my local store.

        O
        osgood_Correct answer
        Legend
        February 9, 2024

        See if the example code below helps:

         

        <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example Navigation</title>
<style>
.main-nav {
background-color: #000;
}
.main-nav ul {
margin: 0;
padding: 0;
display: flex;
}
.main-nav ul li {
margin: 0;
padding: 0;
list-style: none;
}
.main-nav ul li a {
text-decoration: none;
background-color: #000;
color: #fff;
display: block;
padding: 10px 15px;
}
.main-nav ul li a:hover {
background-color: orange;
color: #000;
}
</style>
</head>
<body>
<div class="main-nav">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</body>
</html>

         

        S
        Stephan5FE6Author
        Known Participant
        February 10, 2024

        Yes, this does exactly what I need thank you so much. Now I just need to understand how to apply it to my code and understand the theory behind it, but thank you so much for your help

          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices