Thanks, Paul. I’ll catch up with you again later on tomorrow. Hopefully rpg_digital will have replied by then. Enjoy your evening 
Just quickly following up on our previous posts. In the event that it’s not possible to make this work properly where there are 2 dropdowns, perhaps it might be possible for me to trim down and combine the contents of the info and more info dropdowns into one single info dropdown. Would the existing code then work as expected and save lots of additional time and trouble? Also, if rpg_digital does find a solution to the problems you’ve discovered, please can you then make the necessary changes to the code you uploaded yesterday so it’s still straightforward for me to understand when adding back to my page. Oh, and one last thing (perhaps asked this previously), should the JS go in an external file or directly on the page?
Hi, I’m not back at my computer for about 3 hours and will reply in depth then as only on a mobile at the moment.
There’s no problem combining your drop downs as it’s just adding extra links. The issue of the drop-down not closing when you click more info will still be there though.
Regarding by the code I added that codepen is your actual page so you can easily copy the required section into your page remembering to add the 2 classes I already mentioned.
The extra css in the middle panel can go at the end of your last css for file and after any bootstrap css files.
The js is n the right panel should go in a script that at before the closing body tag at the bottom of the html.
The search code is a straight copy of the html in my codepen and placed exactly where you see it 
It should be straight forward.
I see no problem with you using implementing the current code now as the js can be updated later.
Hi! Thanks for answering, although remembering what you’d written yesterday about not being around until later on in the day today I hadn’t expected you to. I just wanted to grab a moment to add my thoughts to the thread so they’d be there for you to read when you got back. I’m okay with copying and pasting my links around and combining menu items depending on exactly what I decide to do with this. It’s the combining of new code with existing code and any potential issues this might cause that can leave me scratching my head. Based on what you’ve already posted in terms of HTML, CSS, JS, and your explanation of this should hopefully make the process rather easier for me and less prone to problems. I wasn’t certain whether I should integrate the existing code while there are problems still to sort out, but if any updates are only likely to affect the JS which can easily be swapped out, then as you say it shouldn’t matter. Anyway, hopefully, we’ll receive an update from rpg_digital as soon as time allows. Please don’t worry about replying to me again while you’re away from your desk. We’ll catch up later.
Okay, so when you’re back and only when you can spare the time, I’ve included the changes to a copy of my carousel page here https://cleardirectionhypnotherapy.co.uk/carousel2.html. Seems to work properly when tested offline in Firefox from my editor but when it’s uploaded to the web it’s not displaying properly. Perhaps a fresh set of eyes can tell me what have I overlooked.
Please disregard my previous post because I think it was my updated stylesheet that hadn’t uploaded properly
When entering ‘term’ into the Google search and clicking on Terminator 2, the menu closes before the search results are shown and it’s necessary to click the dropdown again to view the search results, so I’m guessing this is one of the issues that updates to the JS needs to address?
Where have you put the css I gave you as I don’t see it being applied to the search box unless you wanted the search box to be minute?
You also placed the JS before bootstrap.js and not at the end of the html as I mentioned. That means that the bootstrap routines won’t exists yet and therefore the code will not run. The js must be after the bootstrap files like you have done with the button.js as the bottom.
Hi, Paul. I’ve now added a link to the JS for the search dropdown at the very bottom of my page. Does this look right?
As for the CSS, I’m still confused as to exactly what code I now need to add to my stylesheet for this to work properly. Please can you post the necessary block here so I can go paste this in with what I’ve already got?
I realise this must be frustrating. I guess I need to try harder
Here is my complete CSS. There are comments already included that mention /* extra code for google search */
What do I need to add
*!
* Start Bootstrap - Busines Frontpage (https://startbootstrap.com/template-overviews/business-frontpage)
* Copyright 2013-2023 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-business-frontpage/blob/master/LICENSE)
*/
body {
padding-top: 56px;
}
* {
box-sizing: border-box;
}
.row {
display: flex;margin:0 0 0 2px;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 50.00%;padding: 5px;
}
/* navbar */
.navbar-custom {
background-color: #205081;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(255,255,255,.9);
}/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #ffffff;
}
/* change the color of footer */
.bg-custom {
background-color: #205081;
}
/* back to top button */
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: solid #ccc;
outline: none;
background-color: #205081;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
background-color: #555;
}
/* pulsating circle on Pulser page */
#container {
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.circle {
border-radius: 50%;
background-color: #205081;
width: 150px;
height: 150px;
position: absolute;
opacity: 0;
animation: scaleIn 4s infinite cubic-bezier(.36, .11, .89, .32);
}
.item {
z-index: 100;
padding: 5px;
}
.item img {
width: 150px;
}
@keyframes scaleIn {
from {
transform: scale(.5, .5);
opacity: .5;
}
to {
transform: scale(2.5, 2.5);
opacity: 0;
}
}
/* pulsating circle on FAQ page */
.pulsating-circle {
position: absolute;
left: 95%;
top: 20%;
transform: translateX(-50%) translateY(-50%);
width: 30px;
height: 30px;
}
.pulsating-circle:before {
content: "";
position: relative;
display: block;
width: 300%;
height: 300%;
box-sizing: border-box;
margin-left: -100%;
margin-top: -100%;
border-radius: 45px;
background-color: #01a4e9;
-webkit-animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.pulsating-circle:after {
content: "";
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: white;
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-webkit-animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}
@-webkit-keyframes pulse-ring {
0% {
transform: scale(0.33);
}
80%, 100% {
opacity: 0;
}
}
@keyframes pulse-ring {
0% {
transform: scale(0.33);
}
80%, 100% {
opacity: 0;
}
}
@-webkit-keyframes pulse-dot {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
@keyframes pulse-dot {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
/* footer */
/* https://codepen.io/martajasa/pen/zYOPPQq - made with love in lincolnshire footer */
.footer-heart{text-align:center;font-family: open sans, sans-serif;}
.footer-heart a{border-bottom: 1px solid #453886;color: #453886;padding-bottom: .25em; text-decoration: none;}
.footer-heart a:hover{color:#2196f3; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23453886' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
background-position: bottom;
background-repeat: repeat-x;
background-size: 20%;
border-bottom: 0;
padding-bottom: .3em;
text-decoration: none;}
/* emoji */
.emoji{vertical-align: middle;}
/* carousel */
.carousel{
border-radius: 10px 10px 10px 10px;
margin-top: 4px;
background-color: #e5e5e5;
}
.carousel-inner{
height: auto;
border:1px solid white;
}
.carousel-caption{
color: #fff;
top: 0;
right:0;
left:0;
bottom:0;
padding-left:70px;
padding-right:70px;
position:relative;
}
.carousel p {color:#000;}
.carousel h3 {
color: #000;
}
.carousel-control-next, .carousel-control-prev {
z-index: 99;
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%black' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%black' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
/* Search Dropdown */
.sdrop .dropdown-menu {
padding-top: 0;
padding-bottom: 0;
}
.sdrop .dropdown-menu a {
padding: 0.5rem;
color: #000;
background: #f9f9f9;
}
.sdrop .dropdown-menu a:hover {
background: #666;
color: #fff;
}
.sdrop .input-group {
background: #000;
width: auto;
padding: 0.5rem;
color: #fff;
}
/* extra code for google search */
.input-group .gsc-control-cse {
padding: 0;
}
.input-group .gcse-search form {
margin: 0;
background: #000;
}
.input-group .gsc-control-cse {
background: #000;
border-color: #000;
}
.input-group .gsc-search-button-v2 {
width: 40px;
padding: 10px 5px;
}
.input-group input.gsc-input {
width: 150px !important;
}
/* results */
.input-group .gsc-results-wrapper-overlay {
left: 0;
right: 0;
width: 100%;
max-width: 860px;
height: auto;
max-height: 80vh;
}
.dropdown-menu.show {
will-change: auto !important;
transform: none !important;
top: 100% !important;
}
That seems to be working now as regards the css and the js.
The only issue now is whether it is possible to close the menu when you click more-info or info. It’s still usable as it is because you can click the background to close the menu but it would be nice to have the top menu closing as required when the search is not open.
You’ll have to wait for @rpg_digital to answer in the other thread
Try adding this css and see if we can create a backdrop to catch the clicks.
.nav-item-with-search .show:before {
content: "";
position: fixed;
background: transparent;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
Try that out and see if it works without breaking anything else. You will need to put in some link destinations in your menu for testing. I added it to my codepen and it seems to work but needs testing on your live site.
Hi. I’ve now included the extra piece of CSS to create a backdrop. I’ve also added some link destinations in the menu for testing. Hope this helps. https://cleardirectionhypnotherapy.co.uk/index.html
That seems to be working exactly as I would expect. I don’t see anything wrong and all seems to be behaving properly. There doesn’t seem to be a need to add any more js now unless I;ve missed some odd quirk somewhere.
Regarding your css it would be better to use position:sticky for the header rather than position:fixed and then you can lose the magic number padding on the body.
I would also push the footer to the bottom of the viewport on screens with little content.
The changes required would be this:
body{
display:flex!important;
flex-direction:column;
min-height:100vh;
padding:0;
}
footer{margin-top:auto;}
.navbar.fixed-top{
position:fixed;
position:-webkit-sticky;
position:sticky;
}
Thanks for checking, and for the additional info.
Before I make these changes and being careful not to break anything else, please confirm that I only need to remove
body {
padding-top: 56px;
}
from my existing stylesheet and replace with this entire block
body{
display:flex!important;
flex-direction:column;
min-height:100vh;
padding:0;
}
footer{margin-top:auto;}
.navbar.fixed-top{
position:fixed;
position:-webkit-sticky;
position:sticky;
}
and that there isn’t anything else that needs removing/changing for this to work properly?
One other thing, in my nav (and I think this is something you may have already mentioned) it uses JS to determine the colour of links on mouseover and mouse out. Does this matter?
If I wanted to change this so the same is achieved entirely with CSS how can this be done? I’m not very good with applying CSS styles to links, hovers, etc. Please give examples of what would need to stay and what would need to go.
Nothing else should need changing if implemented correctly
It matters because its unnecessary and a waste of code when you could simply have set a:hover{background:red} (using the correct specificity of course :))
For example for your nav-link element you have this code in most of them that can be removed entirely.
title="" style="color:white;" onMouseOver="this.style.color='#e0dcdc'" onMouseOut="this.style.color='#ffffff'"
In most cases that would leave the link looking like this.
<a class="nav-link" href="#">About</a>
Instead of this monstrosity :):
<a class="nav-link" href="" title="About" style="color:white;" onMouseOver="this.style.color='#e0dcdc'" onMouseOut="this.style.color='#ffffff'">About</a>
Then to style it you can do this:
.navbar-custom .sdrop .nav-link{color:#fff}
.navbar-custom .sdrop .nav-link:hover{color:#e0dcdc}
Thanks, Paul.
I’m still learning and I’m only an amateur, but I laughed out loud when I read
It matters because its unnecessary and a waste of code
Instead of this monstrosity :):
Yes, you’re right, and I will make the changes you suggest!
I’ve updated the CSS with the extra code you gave me. I think I’ve done this correctly, but you’d best check just to be on the safe side!
I’ll post back when I’ve made the changes to the links and let you know how I get on.
In the meantime, thanks again.
I’ve removed ‘the monstrosity’ (so far from the index page only) and added the relevant CSS to the bottom of the external stylesheet. The HTML code looks much tidier and the links seem to work okay too. Please just take a quick look to make sure I’ve not taken anything unnecessary out of the nav and that the additions to the CSS are all good. I’ll post back again over the next few days with an update on how things are going and just in case I run up against any other minor probs. In the meantime, thanks again, and enjoy the rest of your day.
1 Like
I’m just on my way out but on quick inspection it looks much better now
You will need to work on the hamburger next
That’s good
When you get time perhaps you’d post back to let me know what changes I need to make to the hamburger.