I am working with Drupal 7 in a Zen 7.x-5.4 subtheme. I am attempting to add a primary navigation bar inside the header/banner area, to the right of the logo along the bottom.
I am not using the 'navigation' region provided as that sits below the header. Instead, I have added a menu block and placed it in the 'header' reagion. Unfortunately, it appears well below the header and logo.
Here is the pertinent html that is output:
<header id="header" class="header" role="banner">
<a id="logo" class="header__logo" rel="home" title="Home" href="/sandbox/">
<nav id="secondary-menu" class="header__secondary-menu" role="navigation">{this menu works fine}
<div class="header__region region region-header">
<div id="block-menu-menu-primary-nav" class="block block-menu first last odd" role="navigation">
<h2 class="block__title block-title">Primary Nav</h2>
<ul class="menu">{menu list here}</ul>
</div>
</div>
</header>
The menu that isn't where I want it lies in the region-header class. Any time I add a block to 'header' in the zen interface, it ends up in that class and appears below the header, not in it. The secondary menu, which is in the header by default, is fine and exactly where it should be. There is no css currently defined for region-header. header is 120px in height and has plenty of room for what I want to do. page.tpl.php offers little more than "print render($page['header']);" so I don't appear to have any control there.
I have 2 questions:
How can I get this menu up into the header where I want it?
How can I get it to hide the 'Primary Nav' title on the menu block? The title is required when creating a menu block and there does not appear to be a method for making it invisible.
Please let me know if there is any more specific information needed to answer these questions.
And, yes, I know similar questions have been asked, but they seem to apply to other versions of Zen and none I've found have been at all helpful.
It never fails. 3 days I've been trying to figure this out before posting a question and as soon as I post, I figure it out.
There was a css block in misc.css with the following
/* Wrapper for any blocks placed in the header region. */
.header__region {
/* Clear the logo. */
clear: both;
}
I just had to comment out the 'clear: both;' line as that was not allowing anything else to float next to the logo.
I was able to remove the menu title by going to 'configure block' and adding "" in the title there to override the title required when creating the menu.
Hopefully this will be of use to someone.
Related
When i create a new Post and write in the excerpt, the post image on the news page just dissappears . It only works if i have no excerpt. Also .. How can i create new posts with existing classes already written in my css?
Without the excerpt ir works just fine. Showing image and text that i add on the post.
My code
<section id="content">
<div class="content-wrap">
<div class="container clearfix">
<div class="row"> {% component 'blogPosts' %}
</div>
</div>
</div>
</section><!-- #content end -->
When not defining an excerpt, a summary attribute is appended to the model. See https://github.com/rainlab/blog-plugin/blob/master/models/Post.php#L344 . If your content starts with an image, it might be that the summary function kicks in and generates the image.
As for the CSS part
I think you're looking to override the partial set by {% componenent 'blogPosts' %}. As per the docs (https://octobercms.com/docs/cms/components#overriding-partials)
All component partials can be overridden using the theme partials. If
a component called channel uses the title.htm partial. We can override
the partial by creating a file in our theme called
partials/channel/title.htm.
Alternatively you can cmd / ctrl + doubleclick to expand the default component markup inside the CMS editor.
In this way you can edit your markup to match your theme.
If you want to override markup there is really easy way. for image #CptMeatball added proper answer you can check that out.
This way you have full control on mark-up and you can edit it.
1. Click on expand component it will reveal mark-up of component
2. Now you can add your own markup and edit it.
if any doubt please comment.
Thank you for taking a look at my question, I have developed a WordPress theme and added live customization to the logo using PHP (Although I think this is a HTML/CSS problem)
Here is what the logo looks like:
On top of the gavel there are some words which is creating that white banneer.
Here's the HTML That handles the logo:
<header class="main_menu">
<div class="container nav_wrapper">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="/">
<?php
// Display the Custom Logo
the_custom_logo();
if(!has_custom_logo()){
echo '<img alt="" src="http://placehold.it/350x90" class="img-responsive">';
}
?>
</a>
The the_custom_logo(); function prints out the image tag.
Any ideas on how I can go about fixing this? I would REALLY appreciate it.
Your question states that on top of the gavel it has words but you don't specify what the words are.
It is worth checking all your code especially in your functions the_custom_logo and hascustomlogo (not printed) for any odd echo or print statements or check your HTML for odd characters. Sometimes echos can be used for locating or printing errors but they maybe triggered erroneously which could be causing the problem with your code.
It might help to view the source in your browser as that will tell you at which point the text is appearing in your code to help you narrow down your search.
Hope this helps
I'm working on a scrollable one-page website, in which each div represents a different section. For example, url is dynaone.com/index.php, and when I click on the menu's different buttons, it changes to /index.php#s1, #s2, #s3, and so on. In section nº 2 I added another menu that works with php GET, in a way that when you click on one of the buttons, it redirects you to index.php?id=1 and so on. Of course when I first tried it, it scrolled me back to the top of the page, 'home', as I wasn't specifying the section. But when I did, assigning "index.php?id=1#s2" to the first element in the inner menu, it redirected me to section 1. It doesn't matter which number I write after "#s", it will keep putting section nº 1 on top of the page.
I'm using SMINT's demo as a base, adjusting it to my website's needs, but I couldn't find anything related to GET method issues on the plugin's page.
I would really appreciate some help with this, as it's very annoying having to go back everytime I click to correctly view section nº 2.
This is part of my inner menu:
<div id="botonera_productos"><ul>
<li> Quemadores </li>
<li> BCAAs</li> </ul> </div>
This is my php section:
if(#$_GET['id']==1) {
?>
<figure><img src="imagenes/quemadores/1.jpg"><figcaption> ULTIMATE L-CARNITINA 500 60 TABS - <b>$330</b> </figcaption></figure>
<?php } ?>
And this is the site's main menu:
<nav class="subMenu" >
<div class="inner">
Home
Nosotros
Productos
Local
Envíos
Consultas
Facebook
</div>
</nav>
Thank you.
The question isn't very clear but basically:
The anchor is an HTML construct. So once the page is already loaded, you can use #whatever to take you to wherever on that page that the anchor has been defined; ala <a id="whatever">
The PHP arguments, like ?id=1 - a new page will be loaded depending on what you use here.
You can use anchors in conjunction with a PHP page (ie. a PHP page may have multiple anchors) but you cannot load a new page with anchors alone.
Maybe Javascript will help you achieve what you want to do. With AJAX calls and the like then there are far less restrictions on how you load data.
I'm working with Drupal for the first time, and have been able to find answers for all of my other questions, so far, on either Drupal's forms or via other means. However, I can't seem to find a way to remove the "Main Menu" header from my superfish menu.
I've created a region called superfish and added superfish to it successfully. But above the menu there is an Main Menu that I would like to remove. There doesn't seem to be a way to do this from the superfish options, and i can't seem to find where in the code this is being appended, or else I would just comment out that line. I've searched in the superfish.js file as well as the 'superfish.module` file and can't seem to find it. I'm a programmer first and a 'web designer' second, so getting my hands dirty in some code is not a problem, in fact, I would prefer to do it that way.
Has anyone else done this? Or know where I should start to look?
This is the html that is generated at runtime:
<div id="superfish">
<div class="region region-superfish">
<div id="block-superfish-1" class="block block-superfish contextual-links-region">
<h2>Main menu</h2>
<div class="contextual-links-wrapper contextual-links-processed">
<div class="content">
<ul id="superfish-1" class="menu sf-menu sf-main-menu sf-horizontal sf-style-simple sf-total-items-2 sf-parent-items-1 sf-single-items-1 superfish-processed sf-js-enabled sf-shadow">
<li id="menu-221-1" class="active-trail first odd sf-item-1 sf-depth-1 sf-no-children">
<li id="menu-312-1" class="active-trail last even sf-item-2 sf-depth-1 sf-total-children-1 sf-parent-children-0 sf-single-children-1 menuparent">
</ul>
</div>
</div>
</div>
Thanks!
I stumbled across the real answer... Isn't it funny that one tends to figure things out when they stop thinking about them?
The main menu header was the block title, when editing the superfish block the very first field is Block Title this allows one to override the default setting of the block title. By placing <none> in this field, the block title is no longer displayed.
Apart from finding where that HTML is output, which is the ideal solution, you could use jquery after the fact to remove the title.
$('#superfish h2').html('');
jsfiddle here: http://jsfiddle.net/DetEb/
I've been looking around for some guide that could tell me how to make an existing menu editable when added in Concrete 5.
Here's the menu I'm using now, I'd like to be able to edit it in c5:
<div class="menu">
<ul>
<li><span>Hem</span></li>
<li><span>Om oss</span></li>
<li><span>Tjänster</span></li>
<li><span>Referenser</span></li>
<li><span> Kontakt</span></li>
</ul>
</div>
The links doesn't work at all in c5, so if anyone could help me a little that would be greatly appreciated!
Thanks!
One of the nice benefits of using any CMS is that it will automatically create the nav menu for you -- so that when users add new pages they automatically show up in the menu.
In Concrete5 specifically, the way you do this is with the "AutoNav" block. As with any block, this can be added to areas on your page, but since you generally want the nav menu to appear on EVERY page in the same place, you can also add the block directly in your template code.
So, for your menu (which is a one-level menu without a dropdown), replace your nav menu html with this code:
<?php
$nav = BlockType::getByHandle('autonav');
$nav->controller->orderBy = 'display_asc';
$nav->controller->displayPages = 'top';
$nav->controller->displaySubPages = 'none';
$nav->render('templates/header_menu');
?>
Now you will need to make a change to your CSS, because that code will generate HTML that is slightly different than what you have -- it looks more like this:
<ul class="nav-header">
<li>Hem</li>
<li>Om oss</li>
<li>Tjänster</li>
<li>Referenser</li>
<li>Kontakt</li>
</ul>
The differences are that there's no surrounding div (although you could leave that if you wanted by surrounding the php code above in the opening and closing div tags), there's no span around the nav items, and the class for a selected item is "nav-selected" instead of "current".