Issues with Bootstrap

Report · Jul 19, 2017

I built a website like all most a year ago with bootstrap. And just the other day, I added a drop down menu to my navigation. I need to modify some colors on the drop down and can't seem how to figure it out. Can someone help me, please?

Home - Empowered Golfers Mb.

Report · Jul 19, 2017

The simplest way to change colors is to use a Bootswatch Theme. The one below is called Flatly.

<!doctype html>

<head>

<title>Bootstrap 3.3.7 Starter</title>

</head>

</button>

</div>

<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>

<li><a href="#">submenu 1-1</a></li>

<li><a href="#">submenu 1-2</a></li>

<li><a href="#">submenu 1-3</a></li>

</ul>

</li>

</ul>

</div>

</nav>

</div>

PAGE CONTENT GOES HERE.....

</div>

</script>

</body>

</html>

More Bootswatch Themes available:

https://bootswatch.com/

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 19, 2017

How do I change the theme I have now. This is all new to me.

Report · Jul 19, 2017

The code I posted above tells all.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 19, 2017

So I would replace this in my header.php and then change my navigation?

Report · Jul 19, 2017

Wherever you have your CSS defined will be replaced with this:

If you prefer to use another Theme, change its name accordingly to one of the free Bootswatch Theme choices. https://bootswatch.com/

cerulean

cosmo

cyborg

darkly

flatly

journal

lumen

paper

readable

sandstone

simplex

slate

spacelab

superhero

united

yeti

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 19, 2017

I replaced this

with this

Report · Jul 20, 2017

I made the changes but still can't seem to be able to access the code in the drop menu to change the colors.

Home - Empowered Golfers Mb.

Report · Jul 20, 2017

Your custom CSS is probably overriding the CSS Theme. Try disabling it.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 20, 2017

I tried that, and I lose everything. There is a funny green when you click on Links tab. I want to get rid of that and I want the sub menus to act like the other tabs. there black and when you hover over them they go white.

Home - Empowered Golfers Mb.

Report · Jul 20, 2017

jaspermaxx44 wrote
I tried that, and I lose everything. There is a funny green when you click on Links tab. I want to get rid of that and I want the sub menus to act like the other tabs. there black and when you hover over them they go white.
Home - Empowered Golfers Mb.

Since you have an id set on your navbar use that. Put the below in your custom.css stylesheet - change the background-color: #889C3A and hover background-color: #476E2C to what colors you require.

#myNavbar .dropdown-menu a {

background-color: #889C3A;

padding: 10px 15px;

color: #fff;

}

#myNavbar .dropdown-menu a:hover {

background-color: #476E2C;

}

#myNavbar .dropdown-menu {

padding: 0;

border: 1px solid #fff;

}

#myNavbar .dropdown-menu li {

border-bottom: none;

border-bottom: 1px solid #fff;

}

#myNavbar .dropdown-menu li:last-child {

border-bottom: none;

}

Report · Jul 20, 2017

This has been very helpful. The only thing I can't get rid of is the dark green when you click on the Links tab. But this is way better.

Report · Jul 20, 2017

jaspermaxx44 wrote
This has been very helpful. The only thing I can't get rid of is the dark green when you click on the Links tab. But this is way better.

Add the below css style to your styles.css file:

.navbar-inverse .navbar-nav>.active> a {

background-color: transparent!important;

}

Then add the below code AFTER the link to your 1.12.4/jquery.min.js file, at the foot of the page

$(function() {

var selector = '.nav li';

$(selector).on('click', function(){

$(selector).removeClass('active');

$(this).addClass('active');

});

</script>

Report · Jul 20, 2017

I can't seem to find 1.12.4/jquery.min.js file,

Report · Jul 20, 2017

jaspermaxx44 wrote
I can't seem to find 1.12.4/jquery.min.js file,

At the bottom of the page, first link after  I've highlighted it in red:

$("#Chatroom").ChatSocket();
</script>

</body>

</html>

Report · Jul 20, 2017

Where is this page hidden? I went through all my files on my website.

Report · Jul 20, 2017

jaspermaxx44 wrote
Where is this page hidden? I went through all my files on my website.

Its the one you linked to in your first post:

Home - Empowered Golfers Mb.

It should be there in ALL your pages to make the Bootstrap navigation function

Report · Jul 20, 2017

Found it. It was in my footer.php file. thanks so much for your patience.

Report · Jul 20, 2017

On your index page. jQuery appears on line 149 of your code. If that is supplied by a server-side include, you will no doubt find it in there.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 20, 2017

It's not on your web server, it's hosted at ajax.googleapis.com, you're linking to it using a <script> tag as Osgood posted.

You don't add Osgoods second code snippet to the script file, you add it after the script link on the page.

Report · Jul 20, 2017

https://forums.adobe.com/people/Jon+Fritz+II wrote
It's not on your web server, it's hosted at ajax.googleapis.com, you're linking to it using a <script> tag as Osgood posted.
You don't add Osgoods second code snippet to the script file, you add it after the script link on the page.

Yup, so bottom of page should look like below, once <script> block has been added:

$(function() {

var selector = '.nav li';

$(selector).on('click', function(){

$(selector).removeClass('active');

$(this).addClass('active');

});

</script>

$("#Chatroom").ChatSocket();
</script>

</body>

</html>

Report · Jul 20, 2017

I think the menu looks better without your custom styles.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 20, 2017

https://forums.adobe.com/people/Nancy+OShea wrote
I think the menu looks better without your custom styles.

Looks more SOPHISTICATED apart from that awful white padding Bootstrap leaves top and bottom of the nav items.

Issues with Bootstrap

1 Correct answer