I am trying to duplicate the responsive navigation bar. If I use the demo, it works like it should. I first attempted to just merge the JS and CSS into an existing css file. That failed. I have now attempted to just use just the demo CSS file, and I have the same problem. The error / problem is when I click on a dropdown, the dropdown “flashes” then goes away. Same thing happens when I shrink the screen enough to produce the hamburger, clicking in the hamburger causes the menu to popup, then it disappears. I’ve run in circles for a few days now. IF in the web-developer tools (Firefox), I cause the menu to be none graphic (listed down the page), it appears that everything shows up.
Hello, what is a responsive menu demo, can you link this info to be tested?
Also your html and/or sorce code may help.
The demo is from the freecodecamp site – How to Build a Responsive Navigation Bar with a Dropdown Menu using JavaScript
How do I attache a ton of code?
You should be able to just paste your code in between triple backtick characters, like so
```
// your code goes here
```
It should automatically truncate long code blocks with a scroll bar
I tried to post the HTML/JS/CSS and I could not get past your online community standards. First was hrefs pointing to my site and then when I stripped everything down to just the HTML with the hrefs dummied up, it gave me another error about more than two links.
type or paste code here
If you use </> it automatically gives you a place to paste you code. This is on the top of the forum editor just give it a click.
<?php
/* Program: SOLEEntryHeader-Menu.html
* Description: Sets up the Header and Menu for
* the Simple Online Entry Web Site
*
*/
// Determine which Menu Items should show - Only Competitor Page starts with YES
// Changed to show all menu items regardless
$NumberOfEntries = checkForEntries($_SESSION['CompetitorID']);
$_SESSION['DisplayMenuEntry'] = 'Y';
$_SESSION['DisplayMenuAdditionalID'] = 'Y';
$_SESSION['DisplayMenuFee'] = 'Y';
// Only display this button if needed
if ($_SESSION['EventDetails'] == 'Y')
{
$_SESSION['DisplayMenuDetail'] = 'Y';
}
else
{
$_SESSION['DisplayMenuDetail'] = 'N';
}
$_SESSION['DisplayMenuComment'] = 'Y';
$_SESSION['DisplayMenuReviewEntry'] = 'Y';
$_SESSION['DisplayMenuSignature'] = 'Y';
$_SESSION['DisplayMenuUpload'] = 'Y';
$_SESSION['DisplayMenuSubmit'] = 'Y';
?>
<div id="main" style='margin: 0; padding-top: 0;'> <!-- end div in SOLEFooter -->
<!-- <div id="header" class="header" style='padding-top: 0;'> -->
<div id="heading" style='padding-top: 0;'>
<img src='https://www.ericv2.com/Logos/<?php echo $_SESSION['Logo']; ?>' class='pure-img-logo'
style='float: left; margin: 0; padding-top: 0;'> <!-- pure-img-headerlogo -->
<h2><?php echo $_SESSION['EventTitle'] ?></h2>
<h2><?php echo $_SESSION['EventDate'] ?></h2>
<h2><?php echo "Your Best Rides Start Here" ?></h2>
<br>
</div> <!-- End of heading -->
<?php
// Start Menu
echo "<header id='nav-menu' aria-label='navigation bar'>";
echo "<div class='container'>";
echo "<div class='nav-start'>";
echo "<nav class='menu'>";
echo "<ul class='menu-bar'>";
// Competitors Page
if ($_SESSION["DisplayMenuCompetitor"] === 'Y')
{
echo "<li><a class='nav-link' href='https://ericv2.com/SOLEEntry.php?P=Competitor'>COMPETITOR</a></li>";
}
// Entries Page
if ($_SESSION["DisplayMenuEntry"] === 'Y')
{
echo "<li>
<button class='nav-link dropdown-btn'
data-dropdown='dropdown1'
aria-haspopup='true'
aria-expanded='false'
aria-label='rideentry'
>
RIDE ENTRIES ▼
</button>";
echo "<div id='dropdown1' class='dropdown'>
<ul role='menu'>";
// mySQL weekday values differ from PHP weekday values. Since we are hard coding here, we are making the adjustment here
if (!empty($_SESSION['MondayRideDate']))
{
$NumberOfEntries = checkForRideEntries(1);
echo "<li role='menuitem'><a class='dropdown-link'
href='https://ericv2.com/SOLEEntry.php?P=Entry&RideDay=1'>MONDAY RIDE ENTRIES($NumberOfEntries)</a>
</li>";
}
if (!empty($_SESSION['TuesdayRideDate']))
{
$NumberOfEntries = checkForRideEntries(2);
echo "<li role='menuitem'><a class='dropdown-link'
href='https://ericv2.com/SOLEEntry.php?P=Entry&RideDay=2'>TUESDAY RIDE ENTRIES($NumberOfEntries)</a>
</li>";
}
if (!empty($_SESSION['WednesdayRideDate']))
{
$NumberOfEntries = checkForRideEntries(3);
echo "<li role='menuitem'><a class='dropdown-link'
href='https://ericv2.com/SOLEEntry.php?P=Entry&RideDay=3'>WEDNESDAY RIDE ENTRIES($NumberOfEntries)</a>
</li>";
}
if (!empty($_SESSION['ThursdayRideDate']))
{
$NumberOfEntries = checkForRideEntries(4);
echo "<li role='menuitem'><a class='dropdown-link'
href='https://ericv2.com/SOLEEntry.php?P=Entry&RideDay=4'>THURSDAY RIDE ENTRIES($NumberOfEntries)</a>
</li>";
}
if (!empty($_SESSION['FridayRideDate']))
{
$NumberOfEntries = checkForRideEntries(5);
echo "<li role='menuitem'><a class='dropdown-link'
href='https://ericv2.com/SOLEEntry.php?P=Entry&RideDay=5'>FRIDAY RIDE ENTRIES($NumberOfEntries)</a>
</li>";
}
if (!empty($_SESSION['SaturdayRideDate']))
{
$NumberOfEntries = checkForRideEntries(6);
echo "<li role='menuitem'><a class='dropdown-link'
href='https://ericv2.com/SOLEEntry.php?P=Entry&RideDay=6'>SATURDAY RIDE ENTRIES($NumberOfEntries)</a>
</li>";
}
if (!empty($_SESSION['SundayRideDate']))
{
$NumberOfEntries = checkForRideEntries(0);
echo "<li role='menuitem'><a class='dropdown-link'
href='https://ericv2.com/SOLEEntry.php?P=Entry&RideDay=7'>SUNDAY RIDE ENTRIES($NumberOfEntries)</a>
</li>";
}
echo "</ul>"; // end of button ul
echo "</div>"; // end of dropdown1 div
echo "</li>"; // end of button li
}
// Fees Page
if ($_SESSION["DisplayMenuFee"] === 'Y')
{
echo "<li><a class='nav-link' href='https://ericv2.com/SOLEEntry.php?P=Fee'>FEES</a></li>";
}
// Additional ID Page
if ($_SESSION["DisplayMenuAdditionalID"] === 'Y')
{
echo "<li><a class='nav-link' href='https://ericv2.com/SOLEEntry.php?P=AdditionalID'>ADDITIONAL IDs</a></li>";
}
// Details Page
if ($_SESSION["DisplayMenuDetail"] === 'Y')
{
echo "<li><a class='nav-link' href='https://ericv2.com/SOLEEntry.php?P=Detail'>ADDITIONAL INFO</a></li>";
}
// Comments Page
if ($_SESSION["DisplayMenuComment"] === 'Y')
{
echo "<li><a class='nav-link' href='https://ericv2.com/SOLEEntry.php?P=Comment'>COMMENTS</a></li>";
}
// Upload Document Page
if ($_SESSION["DisplayMenuUpload"] === 'Y')
{
echo "<li><a class='nav-link' href='https://ericv2.com/SOLEEntry.php?P=UploadDocs'>UPLOAD DOCUMENTS</a></li>";
}
// Signatures Page
if ($_SESSION["DisplayMenuSignature"] === 'Y')
{
echo "<li><a class='nav-link' href='https://ericv2.com/SOLEEntry.php?P=Signature'>WAIVER SIGNATURES</a></li>";
}
// Review Entry Page
if ($_SESSION["DisplayMenuReviewEntry"] === 'Y')
{
echo "<li><a class='nav-link' href='https://ericv2.com/SOLEEntry.php?P=Review'>REVIEW ENTRY</a></li>";
}
// Submit Page
if ($_SESSION["DisplayMenuSubmit"] === 'Y')
{
echo "<li><a class='nav-link' href='https://ericv2.com/SOLEEntry.php?P=Submit'>SUBMIT ENTRY</a></li>";
}
// Start NEW Competitor
echo "<li><a class='nav-link' href='https://ericv2.com/SOLEEntrySecur.php?P=Competitor'>START NEXT COMPETITOR</a></li>";
echo "</ul>"; // end of menubar
echo "</nav>"; // end of menunav
echo "</div>"; // end of nav-start
echo "<div class='nav-end'>";
echo "<button
id='hamburger'
aria-label='hamburger'
aria-haspopup='true'
aria-expanded='false'
aria-hidden='true'
>
<img src='https://ericv2.com/Logos/Hamburger.png' />
</button>";
echo "</div>"; // end of navend
echo "</div>"; // end of container
echo "</header>"; // end of header
?>
<div id="content" class="content"> <!-- end div in SOLEFooter -->
<div id = 'all'> <!-- end div in SOLEFooter.php -->
<div id = 'center'> <!-- end div in the step 4/5 section -->
<p id="startP">
<?php
if ((!empty($CompetitorFirstName)) && (!empty($CompetitorFirstName)))
{
$_SESSION['CompetitorFirstName'] = $CompetitorFirstName;
$_SESSION['CompetitorLastName'] = $CompetitorLastName;
echo "<h3>Competitor Event Information for $CompetitorFirstName $CompetitorLastName </h3>";
}
else
{
echo "<h3>Starting new entry</h3>";
}
?>
That is the HTML that does not work. I figure I have a missing comma, or < or /. But after 5 days of looking I cannot find it. Now, if I use the web developer tools in Firefox and using the style editor, I toggle style sheet visibility, the menu “shows” and behaves correctly.
I checked for errors on code pen, one issue there seems to be all the comments.
<!-- what is this for --> I would remove them all.
This part of you code is showing errors but without links to other files it could be nothing.
Good luck
<?php
$NumberOfEntries = checkForEntries($_SESSION['CompetitorID']);
$_SESSION['DisplayMenuEntry'] = 'Y';
$_SESSION['DisplayMenuAdditionalID'] = 'Y';
$_SESSION['DisplayMenuFee'] = 'Y';
if ($_SESSION['EventDetails'] == 'Y')
{
$_SESSION['DisplayMenuDetail'] = 'Y';
}
else
{
$_SESSION['DisplayMenuDetail'] = 'N';
}
$_SESSION['DisplayMenuComment'] = 'Y';
$_SESSION['DisplayMenuReviewEntry'] = 'Y';
$_SESSION['DisplayMenuSignature'] = 'Y';
$_SESSION['DisplayMenuUpload'] = 'Y';
$_SESSION['DisplayMenuSubmit'] = 'Y';
?>
<div id="main" style='margin: 0; padding-top: 0;'>
<div id="heading" style='padding-top: 0;'>
Note: at least one of the lines of code is commented, I tried to post it as is but nothing came back <!--before/after--> is this part of pythons syntax?
The problem had to do with the location of the statement. I have no idea of what the problem actually was (what “rule” I broke), but by moving the menu HTML next to the made a difference.
1 Like