Okay so i have been looking at this for over a week and can not figure it out. Basically here is an example of the end result i posted earlier:
Previous Stack Overflow Post
Their suggestions did not work. The javascript is changing the header css when you click on the buttons to the top right. Here is a Demo: DEMO of JAVASCRIPT CHANGE
I'm Trying to duplicate this action with the image, but i however do not know javascript that well and am not too sure what i am reading when i look at the javascript file. I either would like someone to help me read this javascript so i can edit it myself or help me find a solution.
Here is the Javascript: Script.JS
Here is the relevant HTML that i have done so far:
body >
<div id="gspinner" class="spinner"></div>
<div id="glob">
<header>
<div class="inner">
<h5><img src="images/logo_large.png" /></h5>
<!--<img src="logo-large.png" id="img- logo" alt="" />
<!--</>-->
<nav>
<ul>
<li class="li-2"><span class="lbl">About Us</span><span class="ico -def"></span><span class="ico -hvr"></span>
<ul>
<li>History</li>
<li>Mission Statement</li>
<li>Solutions</li>
<li>Distribution Area</li>
<li>SAS Logo</li>
</ul>
</li>
<li class="li-1"><span class="lbl">Events</span><span class="ico -def"></span><span class="ico -hvr"></span>
<ul>
<li>Trade Show</li>
<li>Awesome Achievers</li>
<li>What's Happening</li>
</ul></li>
<li class="li-3"><span class="lbl">Technology</span><span class="ico -def"></span><span class="ico -hvr"></span>
<ul>
<li>NexGen</li>
<li>Synergy</li>
<li>EDI</li>
</ul>
</li>
<li class="li-4"><span class="lbl">Marketing</span><span class="ico -def"></span><span class="ico -hvr"></span></li>
<li class="li-5"><span class="lbl">Sales</span><span class="ico -def"></span><span class="ico -hvr"></span></li>
<li class="li-6"><span class="lbl">Employment</span><span class="ico -def"></span><span class="ico -hvr"></span></li>
</ul>
</nav>
</div>
</header>
And here is the CSS: Style.css
ANY help would be greatly appreciated and will get "points" for it, i have been working on this for over a week with no help, but i have decided i should reach out for help.
THANKS!
Not a Javascript solution, but I managed to achieve what you want using CSS; just add 'height: 40%' to your logo image and it should scale with the header (note that you'll probably need to use a higher-quality version of the logo), as the current one gets a bit pixellated when it grows.
Related
Sorry if this has been answered previously; I've dug around but can't find it. I'm using the Materialize sidenav by calling M.AutoInit() which works for me until I try putting it in a separate Javascript file. I've been able to set up my footer this way so I don't have repeat code, but this doesn't seem to work for the sidenav. The sidenav shows up but the collapsible part will not open.
I think the problem is it doesn't like calling the collapsible part from HTML that is being inserted dynamically. But I tried separating out the collapsible portion (using 2 different querySelectors) which did not work either. If I were to put at least part of the sidenav back into my HTML page, it would defeat the purpose of me doing this.
Any thoughts or solutions? Thanks for looking at it!
document.addEventListener("DOMContentLoaded", () => {
M.AutoInit()
document.querySelector('header').insertAdjacentHTML('afterbegin',
`<ul id="slide-out" class="sidenav sidenav-fixed">
<li>
<a
href="https://www.greece.org/"
target="_blank"
rel="noopener noreferrer"
>HEC Main</a
>
</li>
<li>
<a href="index.html" class="sidenav-close" rel="noopener noreferrer"
>Home</a
>
</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<button class="collapsible-header">
History<i class="material-icons">arrow_drop_down</i>
</button>
<div class="collapsible-body">
<ul class="sidenav-close">
<li>
A Brief Review
</li>
<li>Philosophers List</li>
<li>Philosophers Map</li>
<li>The Beginning</li>
<li>Socrates</li>
<li>Plato</li>
<li>Aristotle</li>
<li>
<a href="bibliography-references.html"
>Bibliograpy / References</a
>
</li>
</ul>
</div>
</li>
</ul>
</li>
<li class="divider"></li>
<li>
Media
</li>
<li>
Events
</li>
</ul>`)
document.querySelector('main').insertAdjacentHTML('afterend',
`<footer class="page-footer">
<div class="container">
<p class="center-align">
Philosophy is sponsored by
<a
href="https://www.greece.org"
target="_blank"
>
www.greece.org
</a> | © 2021 All Rights Reserved.
</p>
</div>
<div class="fixed-action-btn">
<a href="#top" class="btn-floating btn-large" style="background-color: silver;">
<i class="large material-icons">arrow_upward</i>
</a>
</div>
</footer>`)
})
Initialisation is a one time thing - it scans the document for the matching selector, and runs the initialisation on it. So, always run the initialisation AFTER any dynamic content is added. If you add stuff on the fly, just run the init again.
Codepen.
document.addEventListener('DOMContentLoaded', function() {
// Always add stuff to the page BEFORE running the init
// Anything hardcoded to the page will be fine if wrapped in a document ready.
M.AutoInit();
// Anything added after the init will NOT be initialised. It's a one time thing. Run the init at the end of any dynamic additions.
});
Side nav works fine, but when I click on any button on it auto scroll isn't working. all links are not working.
<div class="navbar-fixed">
<nav class="white" role="navigation">
<div class="nav-wrapper" style="width: 90%;margin: 0 auto;">
<a id="logo-container" href="#" class="brand-logo"><img class="responsive-img" src="img/fortuna_logo_black.png"></a>
<ul class="right hide-on-med-and-down">
<li>Clients</li>
<li>Our Solutions</li>
<li>Is this for Me?</li>
<li>Pricing</li>
<li>FAQs</li>
</ul>
<ul id="nav-mobile" class="sidenav">
<li>Clients</li>
<li>Our Solutions</li>
<li>Is this for Me?</li>
<li>Pricing</li>
<li>FAQs</li>
</ul>
<i class="material-icons">menu</i>
</div>
</nav>
Could you update your question with the CSS, I guess you are using more CSS than provided above. Are you also using Javascript or only CSS?
With the information that you provide in your question, we can't really do much as we cant see the problem.
I am working on designing a page by looking at the image I have. I am stuck on the menu bar design as I am not able to figure out how can I design the menu bar like I have in my image. It should exactly match with what I have in my image.
Here is my jsfiddle and here is my image which I am trying to replicate.
I tried creating horizontal menu bar as shown in that image but somehow my menus are not showing at all. It looks like they are hidden somewhere. Here is my HTML code:
<div class="topnav">
<img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
<nav>
<ul>
<li class="dropdown">
<b>PROGRAMS</b> <i class="fa fa-angle-down"></i>
<ul class="dropdown-content">
<li><i>INDIVIDUAL</i>
</li>
<li><i>CORPORATE</i>
</li>
</ul>
</li>
<li class="dropdown">
<b>WORLD OF NORTHMAN</b> <i class="fa fa-angle-down"></i>
<ul class="dropdown-content">
<li><i>BE EXTRODINARY</i>
</li>
<li><i>RISK & REWARD</i>
</li>
<li><i>BLOG</i>
</li>
<li><i>OUR STORY</i>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="header"> <img class="header-background" src="https://s3.postimg.org/yr4kr8v0j/kaestle-chris-davenport-antarktis-2009-04.png"> <img class="orange-bar" src="https://s23.postimg.org/od4umnehn/orange-bar.png">
<h1 class="text-inside-orange">INSURANCE FOR THE WILD</h1>
</div>
What is wrong I am doing here? Also I need to make Log in | Sign up using font aswesome (and I have already imported its css in my jsfiddle) and GET COVERED button as well.
The first 2 problems are:
.dropdown {
display: none; /* get rid of this */
}
and you need your img to float: left.
I'm looking into an issue on a site that I manage.
Whats happening is that when you look at the cached version of the site (the text version) from Google it is not showing some of the child navigation links.
I'm not quite sure how google bots work to find these links but I cant see anything wrong with my markup.
Here is a snippet of code that i use for the navigation:
<div id="tabsPanel">
<ul>
<li class="home" id="home_item">
home
</li>
<li class="type" id="shopbystyle_item">
Style
<ul id="menucontainer" class="submenu" style="display: none;">
<li class="style1" id="contemporary_item">
<a href="/modern" class="item">
Modern
</a>
</li>
<li class="traditional" id="traditional_item">
<a href="/traditional" class="item">
Traditional
</a>
</li>
</ul>
</li>
<li class="type" id="shopbycolor_item">
Color
<ul id="menucontainer" class="submenu" style="display: none;">
<li class="style1" id="blue_item">
<a href="/blue" class="item">
Blue
</a>
</li>
<li class="traditional" id="red_item">
<a href="/red" class="item">
Red
</a>
</li>
</ul>
</li>
</ul>
</div>
The "Home" and "Style" links are picked up by Google however the "Modern" and "Traditional" links are not.
I use JavaScript to show/hide the sub menu but surely this shouldn't cause Google to not pick up those links? On other sites I have seen Google pick up links on navigation items that are shown using JavaScript.
Could it have something to do with the fact that both of my submenu ul elements have the same ID?
My question is why is Google only seeing the parent links and not the child links?
It turns out that using absolute URL's for the sub menu items worked. Not sure why this would be but i changed the following:
From this:
<li class="style1" id="contemporary_item">
<a href="/modern" class="item">
Modern
</a>
</li>
To this:
<li class="style1" id="contemporary_item">
<a href="http://www.example.com/modern" class="item">
Modern
</a>
</li>
I want to Highlight the Menu Dynamically in Html Pages using Js.
For Example
<div id="cssmenu">
<ul id="myid">
<li id="m1">COMPANY</li>
<li id="m2" class="has-sub">SERVICES
<ul>
<li class="has-sub">Enterprise Solution
<ul>
<li>SAP</li>
<li>Oracle</li>
</ul>
</li>
</div>
I given Like this. But its not working
<script>
$(document).ready(function() {
$("#cssmenu ul li").click(function() {
$(this).addClass('active').siblings('li').removeClass('active');
});
});
For this i would like activate the Menu when it is Clicked Using Js. Please Help me.
Thanks in Advance.
I have a demo for you here: http://jsfiddle.net/ttaN2/4/
I have altered the HTML so that there are correct open and close tags:
<div id="cssmenu">
<ul id="myid">
<li id="m1">COMPANY</li>
<li id="m2" class="has-sub">SERVICES</li>
<li class="has-sub">Enterprise Solution
<ul>
<li>SAP</li>
<li>Oracle</li>
</ul>
</li>
</ul>
</div>
I believe this is what you intended. I am not sure what you intended to happen when you click on another sub menu though. I'll try to help you out if you can describe exactly what you intend to happen.