Basically, I have to apply a backup of a Joomla Website, ... the problem is, that the navigation of the backup does not apply the correct CSS and therefore is not displayed correctly, which I found out by using inspect element.
Now I'm facing the issue that I have no idea on how to change the CSS-classes.
I compared the two template files and found no differences in how the CSS is applied:
<header id="header" class="single-menu flat-menu">
<div class="navbar-collapse nav-main-collapse collapse">
<div class="container">
<nav class="nav-main">
<jdoc:include type="modules" name="navigation" style="none" />
</nav>
</div>
</div>
</header>
The navigation module implements the main menu, yet does not apply any extra CSS and neither does the main menu.
There are seemingly no differences in the template-file or the CSS-files.
So my question now is: How exactly does Joomla apply the correct CSS to the navigation? I can't seem to find any way and yet with inspect element you can see that the webpage where the navigation is displayed correctly has the class:
<ul class="nav nav-pills nav-main">
<li class="item-xxx dropdown">
and the one where it is displayed incorrectly has:
<ul class="nav menu">
<li class="item-xxx deeper parent">
I fixed it now:
My problem was that on the webpage the override for the default.php of the menu module was directly in the root/modules/mod_menu folder, which gets overridden on an update. So I had to copy the correct default.php into the new override folder (root/templates/template/html/mod_menu/ ) and everything worked again.
Related
I'm a beginner in HTML and CSS and I watched this guy's tutorial on how to build a portfolio.
In the 'nav' class, he left the code as such,
<div class="nav">
<a class="a active" href="#">Home</a>
<a class="b"href="#">Gear</a>
<a class="c" href="#">Colour Dump</a>
<a class="d" href="#">BnW Dump</a>
</div>
The website he is building seems to be more of a local based html file and not meant to be hosted on actual server as there isn't any links in the buttons. How would I go about fixing this? I plan to host the website on an actual web server and I just tested it, the buttons do not lead anywhere due to a lack of buttons.
Here is a pastebin leading to my html file and
one to my css file.
My apologies if some of the classes names are misleading (i.e. do not match up to the titles), I was following his tutorial and only edited the details afterwards.
Thank you in advance for any help rendered!!
Your href links in a navigation will most likely link to another page on your website like this:
<div class="nav">
<a class="a active" href="/about">Home</a>
</div>
Another option would be an anchor link. This is the case for example if you have a single page website.
<div class="nav">
<a class="a active" href="#about">Home</a>
</div>
// Jumps to the element with the id="about"
If your nav would link to another website it would look something like this
<div class="nav">
<a class="a active" href="https://example.com">Go to Example</a>
</div>
// This link is external
Also interesting is to learn about the different attributes for links. You can find a goof read here.
I have a website coded with HTML responsive and the sidebar navigator element of the site disappears on mobile. The following is what I currently have in terms of code for this. I would like to have the sidebar work on mobile, would be grateful to anyone who can help.
<header id="header" class="skel-layers-fixed">
<img src="/images/logo.jpg" alt="" style="width:64px;height:48px;border:50;">
<nav id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Platform</li>
<li>Photos</li>
<li>Endorsements</li>
</ul>
</nav>
</header>
Your nav-element is inside your header-element. That means, that perhaps, depending on your CSS-styling, your nav-element can be hidden behind the image. Start by inspecting your source-code in the browser and se if it even generates correctly. Then go on from there... Try also to avoid inline-css-styling, by experience this can mess up your workflow and makes it harder to debugging, and for other to understand and read your code.
I'm having a strange behavior with using bootstrap's navbar nav. I have normal text and a label span in one of the navigational elements and the span sometimes ends up in new line thus rendering whole navbar higher than it should be. The strangest thing is that it happens only occasionally (~50% of the time), but without me changing any conditions (same screen size, same page/content, etc.). Also, I was only able to reproduce this in Chrome not in Firefox.
As soon as I use dev-tools to adjust any css settings, the span jumps back in place, so I'm really out of idea how to debug or experiment with fixes.
Any ideas or suggestions on:
how to debug the issuse?
what could be the cause?
Here is how it looks broken:
and how it should be:
And here is excerpt of my header. Unfortunately I have a lot of code in the full header (and it's an angular app some things are controlled dynamically), so I'm not fully excluding the possibility that the problem is somewhere else, but I'm having hard time reproducing it regularly with the full code, so I didn't think making a plunker case would be easy.
<header class="navbar navbar-default navbar-fixed-top ng-scope">
<nav class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="divider-vertical hidden-xs"></li>
<li id="home-button">
Home
</li>
<li id="library">
<a href="/library">Library
<span class="small label label-primary label-super">new</span>
</a>
</li>
</ul>
</nav>
</header>
I've looked at this for a number of hours now and can't figure out what is going on. Any help would be much appreciated thank you. It is a very strange problem and rather than going into detail I thought it best to just show you, so please find below a link to problem, currently on the development page of my website.
http://dev.cccit.co.uk/about-us/our-team/
As you can see the active dropdown seems to work along with the header being active in the nav bar as well, however when highlighting the nav select it is making the header appear darker and also not selecting the whole box (missing out the information section). It is probably easier to just see for yourself.... hover over About Us in the nav bar and you will see.
I thought initially this might be css related.... there is a separate css file for color selection which I have changed every option without any affect, and what makes me think this won't help is the strange way in which the whole menu is not changing when you hover. Please find a copy of the code below, bear in mind I'm using php for this section, but it also does the same thing regardless, so I have also changed the header for "Support" so that you can see it is doing the same thing.
I thought someone may have come across the same thing, if you need any more information or files, then please get in touch. Thank you in advance
`div class="container">
<div id="nav-wrapper">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="buttons-container">
</div>
<div class="nav-collapse">
<ul class="nav nav-pills">
<li class="single"><a href="../index.php">HOME
<i></i>
</a>
</li>
<li <?php if($pageName == "About Us")echo " class='dropdown active' ";?> class="dropdown">
<a href='/about-us'>
ABOUT US<i></i>
</a>
<ul class="dropdown-menu">
<li <?php if($pageMetaTitle == "Our Team")echo " class='active' ";?>>Our Team</li>
<li <?php if($pageMetaTitle == "Philosophy")echo " class='active' ";?>>Philosophy</li>
<li <?php if($pageMetaTitle == "FAQs")echo " class='active' ";?>>FAQs</li>
</ul>
</li>
<li class="dropdown active">
<a href="/support">
SUPPORT<i>IT support for business</i>
</a>
<ul class="dropdown-menu">
<li>Support Packages</li>
<li>Service Level Agreements</li>
<li>FAQs</li>
</ul>
</li>
`
Remove the custom background colors you set have for the <i> tags.
Noticing the hover effects on Firebug, the colors don't match the hover effects of the parent element.
I'm new to jQTouch -- it's pretty awesome -- but I'm finding that I'm not able to get it to work out of the box for my HTML, even though I'm following the getting started guide as well as the markup guidelines.
Specifically, each of my screens is a <section> element (direct child of <body>) with a unique ID, and I have links to those IDs, e.g. <a href="#screen-a">. This seems to follow the convention of the demo code, but yet the demo code works and my code doesn't.
Here is the HTML structure of my <body>:
<section id="main-menu">
<header class="toolbar"><!-- ... --></header>
<nav>
<ul>
<li class="arrow">Screen A</li>
<li class="arrow">Screen B</li>
<li class="arrow">Screen C</li>
</ul>
</nav>
<footer><!-- ... --></footer>
</section>
<section id="screen-a"><!-- ... --></section>
<section id="screen-b"><!-- ... --></section>
<section id="screen-c"><!-- ... --></section>
<script src="jquery.min.js"></script>
<script src="jqtouch.min.js"></script>
<script src="init.js"></script>
And my init.js simply initializes jQTouch (no custom options):
var jQT = new $.jQTouch({});
When I load my page, the UI appears fine, and I can confirm jQTouch was initialized because my jQT variable exists.
But when I click any link, the location bar changes to the new hash (e.g. "#screen-a"), but the UI doesn't change. And the JavaScript console starts throwing repeated multiple No pages in history errors.
(When I use the unminified jQTouch.js, these errors come from inside the jQTouch goBack() function, which is being called from the dumbLoopStart() timer.)
Note that this happens for me both in desktop Safari and in Mobile Safari on the iPhone. But that's very strange, because their demo works just fine for me on both.
I've banged my head against this for hours to no avail. Does anyone have ideas or suggestions or tips for what I might be doing wrong? Thanks!
I created an test from your provided example (with the addition of the style imports). Simply removing the <nav> elements resolved the issue for me.
I believe your main elements have to be div's. Additionally, you need a class of "current" on the div that should be displayed first.
I don't know if the version you are using requires this, but what I pulled via git a while back requires that all of your main elements be contained in a div with an id of "jqt".
<div id="jqt">
<div id="main-menu" class="current">
<ul>
<li class="arrow">Screen A</li>
<li class="arrow">Screen B</li>
<li class="arrow">Screen C</li>
</ul>
</div>
<div id="screen-a"><!-- ... --></div>
<div id="screen-b"><!-- ... --></div>
<div id="screen-c"><!-- ... --></div>
</div>
<script src="jquery.min.js"></script>
<script src="jqtouch.min.js"></script>