I'm migrating my HTML / CSS website to WordPress (creating a theme). I'm using the code shown below to turn wordpress 'pages' into navigation li links.
The code works, But the Word press nav styling is slightly different to the HTML site.
The code should work the same in both cases, but I suspect WP is not applying either an id or class
Can anyone help me understand why these code snippets give different styling results (The same css sheet is used for both the wordpress and the non wordpress site)
WP nav code (found in header.php)
<nav>
<ul id="navigation" class="slimmenu">
<?php wp_nav_menu(); ?>
</ul>
</nav>
HTML site nav code
<nav>
<ul id="navigation" class="slimmenu">
<li>Home</li>
<li>Bikes</li>
<li>Parts</li>
<li>Events</li>
<li>Contacts</li>
</ul>
</nav>
many thanks,
You should not have wp_nav_menu() inside a <ul> element.
This function creates HTML which includes a wrapper (div) and it's own <ul> element. so your HTML is going to be invalid and your CSS is unlikely to work.
Just use:
<nav>
<?php wp_nav_menu( array( 'menu_id' => 'navigation', 'menu_class' => 'slimmenu') ); ?>
</nav>
If your CSS selectors are not overly specific, they may still work with the HTML generated by WordPress.
Related
I have a PHP function which contains the footer applied to each of my web pages. For the majority of the pages it is displayed as it should. But on some pages it isn't and it seems to be caused by what I can only describe as 'phantom elements' as they aren't within my HTML/PHP code but are shown in Elements of the browser Development Tools. See the below screenshot of the code:
Screenshot of code issue
Basically it adds an empty anchor element which contains no text but CSS is applied to it giving it the padding of the other tags, which ultimately pushes all of the other list and anchor elements to the right of the empty anchor.
The PHP function is:
function enterFooter (){
$pageFoot = <<<FOOT
<footer class="web-foot">
<div class="link-container">
<ul>
<li>
Homepage
</li>
<li>
Sitemap
</li>
<li>
Company
</li>
<li>
Home
</li>
</ul>
</div>
</footer>
FOOT;
echo $pageFooter;
Any ideas what could be causing this problem?
I'm new to wordpress.
Is it possible to use original HTML for navigation menu and edit its titles and URLs in wordpress admin?
My navigation HTML looks like this.
<nav>
<ul id="menu">
<li><a>Menu1</a>
<div class="slideToggleThis">
<ul>
<li><a>Menu1-1</a>
<ul>
<li>Menu1-1-1</li>
<li>Menu1-1-2</li>
<li>Menu1-1-3</li>
</ul>
</li>
<li><a>Menu1-2</a>
<ul>
<li>Menu1-2-1</li>
<li>Menu1-2-2</li>
<li>Menu1-2-3</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
<ul id="hamburger">
<li><a id="hamburgerFont"></a>
<ul>
<li><a>MenuS</a>
<ul>
<li>MenuA</li>
<li>MenuB</li>
<li>MenuC</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
As you can see from this, my nav has div between ul and li. The div is necessary because the nav is arranged with Flexbox, thus slideToggle from JQuery doesn't work properly without it (slideToggle changes affected elements' display to block which is not good for display: flex;).
As long as I know, HTML code created by "?php wp_nav_menu(); ?" is simple combination of ul and li which is different from mine.
Are there any solution for me to edit my original HTML navigation menu in wordpress admin? or should I manually change the php files every time I change the contents in the menu?
Thank you for reading.
There is a way of changing the structure of the WordPress menu. I'm not that good in explaining the exact code but this url may help you:
https://github.com/roikles/Wordpress-Bem-Menu
He creates a new navigation setup, based on BEM method, to create a new structure.
By calling bem_menu( you can add the navigation (read docs for more info). Here you can adjust your settings.
I'm working on a Wordpress theme on my local machine and i thought it would be cool to use bootstrap with it. I build the website already in html/css but wanted to upload it to Wordpress (To learn wordpress).
Now i'm rebuilding my nav section because i want it to make it customable in my admin-panel. I'm using:
<?php $args = array( 'theme_location' => 'header' ); ?>
<?php wp_nav_menu( $args ); ?>
The bowser displayed a div>ul>li>a. I edited the div, ul and li's class to bootstrap classes but now i need to get an A class of nav-link to my a tag.
This is what my bowser gives me now:
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Homepage
</li>
</ul>
</div>
This is what i want.
Home
I'm editing my nav-menu-template.php now but can't find it.
Where can i change the classes of the A tag in wp_nav_menu();
(I know that someone else asked this aswell, but i couldn't get that code to work. Maybe because the commands where from 2014 or maybe because i did something wrong.)
You may have some luck looking through your theme's functions.php file. Try looking for the wp_nav_menu function in that file, and see what that gets you.
The code you're looking for may be in functions.php, or you may find a reference in that file to another file.
How this stuff gets handled can vary widely based on how the template is constructed, which may be why you didn't have much luck searching for the answer.
Best of luck!
I've created a modular web page in which each component is within it's own html/php file. Example, index.html calls up header.html, content.php, etc. The reason, so I can keep each section clean, and separate.
My header.php includes a navigational bar (which also uses CSS3 to provide drop down menu (ex, DEF):
<div id="nav">
<ul><li class="navlist"ABC</li>
<li class="navlist">DEF
<ul>
<li><li>GHI</li>
<li>JKL</li>
</ul></li>
<li class="navlist">MNO</li>
</ul>
My dilemma is that I want the 'li class' to equal 'nav_active_menu' if it is the current page being viewed.
I'm assuming that PHP can take care of this, but unsure as to how. Can anyone provide any examples, or links on how to do this?
Hopefully this makes sense.. words....
You can do that by making $activePage variable before you include the header.php page
in you abc.php file:
$activePage = "abc";
include('header.php');
and in your header.php file:
<li class="<?php if ($activePage == "abc") echo 'nav_active_menu'; ?>">ABC</li>
The same way for other pages but with a different value with $activePage variable.
This is another solution, using javascript with jquery.
Add a specific CSS class to each parent li:
<div id="nav">
<ul>
<li class="navlist abc">ABC</li>
<li class="navlist def">DEF
<ul>
<li>GHI</li>
<li>JKL</li>
</ul>
</li>
<li class="navlist mno">MNO</li>
</ul>
</div>
Then add jquery javascript to your <head> in the HTML.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Add this to your CSS:
.nav_active_menu {your css for active_item goes here}
And in each HTML page add the relevant jquery selector to activate:
<script>
$(".def a").first().addClass('nav_active_menu');
</script>
See fiddle: http://jsfiddle.net/tmfncbb7/2/ (fiddle updated with the correct class)
I have a navbar with sublists. I use this navbar for a CSS navbar at the top of my web page, with links for the main pages and drop-down lists for the pages in the sub-lists. I would like to use the same structure to create a navbar at the side of my page for sublists.
All of my HTML pages have the following line near the top of the <BODY> that creates the navbar:
<?php include('navbar.php'); ?>
CSS styling of this navbar is taken care of elsewhere.
Suppose my navbar.php file has the following:
<nav id="mainnavbar>
<ul id="index">
<li>Home</li>
<li>Personal
<ul id="personal">
<li>About Me</li>
<li>Contact Info</li>
</ul>
</li>
<li>Professional
<ul id="professional">
<li>Activities</li>
<li>Resume</li>
</ul>
</li>
</ul>
</nav>
The horizontal navbar at the top of my page would list "Home | Personal | Professional", and there would be dropdown menus on "Personal" and "Professional". This navbar is easily included on ALL pages for a uniform experience. Not too hard.
If a user actually navigates to one of the main (or "parent") pages (e.g. "Home", "Personal", or "Professional"), however, I want there to be a second, vertical navbar on the side of that page with links to that page's "children."
For example, if the user goes to the "Personal" page, there should be a side-navbar with links to "About Me" and "Contact Info". If instead the user navigates to "Professional", that sidebar should instead display links to "Activities" and "Resume". If the user decides to go back to the "Home" page, the sidebar should display "Personal" and "Professional". (Although it would be 100% fine if it also displayed "Home" -- perhaps it would be easier that way?)
While I could hard-code a new <nav> for each page, I already have a unordered list structure and would like to make use of it. Any ideas how this could be done, or if there's a better way to do it?
Perhaps I would want to dynamically generate (via the magic of PHP) a second instance of <nav> that is a sort of partial copy of <nav id="mainnavbar">, listed above, but including one of the nested unordered lists, rather than everything. Then I could position and stylize each navbar separately.
(Note that only the Home, Personal and Professional pages should have a sidebar navigation menu because only they have "child" pages. The "child" pages should not have a sub-menu. )
In essence, I should have the following:
For index.html, I should have the following dynamically generated based on navbar.php:
<nav id="subnavbar">
<ul id="index">
<li>Home</li>
<li>Personal </li
<li>Professional</li>
</ul>
</nav>
For personal.html, I should have the following dynamically generated based on navbar.php:
<nav id="subnavbar">
<ul id="professional">
<li>Activities</li>
<li>Resume</li>
</ul>
</nav>
For professional.html, I should have the following dynamically generated based on navbar.php:
<nav id="subnavbar">
<ul id="professional">
<li>Activities</li>
<li>Resume</li>
</ul>
</nav>
For all other pages, there should be no sidebar navigation. (Or perhaps I should have some default navbar as a placeholder??)
I'm not sure if having the same id for an unordered list in two different <nav> sections would be problematic, however.
Thanks again for your help!
You can use PHP to determine what page you are on, and print out different HTML for the different pages. I put together the simplest version of what you are asking for. Use the same principle to expand on this. You can use the $_SERVER superglobal to find out the current URL.
<?php
// See if current URL ends with "personal.html"
$personal = preg_match('/personal\.html$/',$_SERVER['REQUEST_URI']);
?>
<nav>
<ul>
<li>Home</li>
<li>Personal
<?php if (!$personal) print '<ul>'; ?>
<li>About Me</li>
<li>Contact Info</li>
<?php if (!$personal) print '</ul>'; ?>
</li>
<li>Professional
<ul>
<li>Activities</li>
<li>Resume</li>
</ul>
</li>
</ul>
</nav>
All I am doing here is removing the <ul> tags for the personal page, which will put the two nested <li> inline with the rest of the navbar elements. You need to expand on this to fit the design you need.