• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Problem with buttons and links in navbar

Explorer ,
Feb 09, 2024 Feb 09, 2024

Copy link to clipboard

Copied

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

 

 

 

Views

263

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Feb 09, 2024 Feb 09, 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>
<b
...

Votes

Translate

Translate
LEGEND ,
Feb 09, 2024 Feb 09, 2024

Copy link to clipboard

Copied

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>

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 10, 2024 Feb 10, 2024

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 09, 2024 Feb 09, 2024

Copy link to clipboard

Copied

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 09, 2024 Feb 09, 2024

Copy link to clipboard

Copied

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, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 10, 2024 Feb 10, 2024

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 10, 2024 Feb 10, 2024

Copy link to clipboard

Copied

Anyone who is aspiring to become a 'professional' developer does not use Dreamweaver.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 10, 2024 Feb 10, 2024

Copy link to clipboard

Copied

quote

Anyone who is aspiring to become a 'professional' developer does not use Dreamweaver.


By @BenPleysier

 

I think it might still be popular amongst students...........mainly because their mentors aren't usually qualified enough to know alternative workflows exist. We get a fair few students post in this forum using DW for class work, entry level exposure to coding.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 10, 2024 Feb 10, 2024

Copy link to clipboard

Copied

I am trying to use Flexbox instead of Bootstrap can the two be used together? 

 

For example, use Bootstrap for the navbar, then keep doing the rest of the website with HTML and Flexbox 

 

As a general answer, I am not inspired to be a professional developer right now, I am just creating a website for myself, I could have easily done with many website builders out there, but I want to put my hands into full development and try to make it from scratch to understand how everything works behind a webpage.

 

And I find DW does a great job, because it gives me the possibility to use the UI to add properties and elements this way is more visual and easy, while it writes the code for you, I can learn how the code is structured 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 10, 2024 Feb 10, 2024

Copy link to clipboard

Copied

quote

I am trying to use Flexbox instead of Bootstrap can the two be used together? 

 

For example, use Bootstrap for the navbar, then keep doing the rest of the website with HTML and Flexbox 

 

By @Stephan5FE6

 

Sure, you can use Bootstrap for the navbar and then use flexbox for the rest of the website, although the Bootstrap grid system now uses flexbox as default, so not sure why you would want to abandon Bootstrap for the main structure of the website If you are using it for the navbar...........but yes, you can mix and match for sure.

 

The only possible caveat being you need to make sure you use some unique naming conventions for your own css selectors, nothing that is likely to conflict with the hundreds of default css selectors which will be loaded into the default Bootstrap css file. You're going to be deploying a heavily bloated css file just for the navbar unless you isolated those specific css selectors. As you're not a professional developer its not something to worry about but as I am its my job to get that out there.

 

quote

As a general answer, I am not inspired to be a professional developer right now, I am just creating a website for myself, I could have easily done with many website builders out there, but I want to put my hands into full development and try to make it from scratch to understand how everything works behind a webpage.

 

By @Stephan5FE6

 

Well I commend you for at least trying to understand how everything works. Bootstrap is a framework - you deploy components/columns etc then style them with the default Bootstrap css utility classes. I would go so far as to say Bootstrap IS a website builder and to use it is OK if you're not really interested in pursuing a long-term professional career in development.

 

Good luck with your project. Post back if you get stuck, there are people who use Bootstrap in the forum (not me). They will be able to assist you.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 10, 2024 Feb 10, 2024

Copy link to clipboard

Copied

Have a look at this video that I created on the subject.

https://youtu.be/roYyn3cfMrE?si=T3N9Lsg1oNcz5cRu

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 10, 2024 Feb 10, 2024

Copy link to clipboard

Copied

LATEST
quote

I am trying to use Flexbox instead of Bootstrap can the two be used together? 

By @Stephan5FE6

=========

Bootstrap IS FlexBox and a whole lot more!  It's a responsive, 12-box grid system with classes for everything you're likely to need for creating an interactive website that performs well on ALL devices. 

 

It behooves you to read up on Bootstrap because it's the most popular HTML & CSS framework used by millions of websites worldwide.  And Bootstrap is compatible with all code editors, not just Dreamweaver.

 

Work smarter, not harder with Bootstrap 5:

https://www.w3schools.com/bootstrap5/

 

Post back if you have any questions.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines