Forums

C5 header (editor) overlaps bootstrap nav/header.

Permalink
Hi,

By following this tutorial converting html to concrete5 theme -->www.www.youtube.com/watch?v=vQm1QXN9OfI....

On my part, I've used jumbotron bootstrap as experiment from think linkhttp://getbootstrap.com/examples/jumbotron/...
Converting was a success except for the C5 header (editor) that have been overlapping with nav menu when logged in. I could not see any labeled menu... So I was wondering if there are any solutions? perhaps margin entire page when c5 header pop up?

Your help is appreicated.
 
WebcentricLtd replied on at Permalink Reply
can you maybe post a screenshot / some code? Which version of Concrete5 are you using?
WebcentricLtd replied on at Permalink Reply
can you maybe post a screenshot / some code? Which version of Concrete5 are you using?
APrather replied on at Permalink Reply
Thank you for replying AndyJ -- I have the latest update of Concrete5 (5.7) which was installed yesterday.

Here's code...
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap core CSS -->
    <link href=" <?=$view->getThemePath()?>/css/bootstrap.min.css" rel="stylesheet">
    <link href=" <?=$view->getThemePath()?>/css/style.css" rel="stylesheet">
  </head>
  <body>
<?=:element('header_required')?>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
Viewing 15 lines of 56 lines. View entire code block.
WebcentricLtd replied on at Permalink Reply
hello,
the header_required shouldn't be inside the html body.

It looks like you are also missing some fundamentals on theme-building for 5.7 as you are missing the call for the page wrapper.

Best thing to do is likely look at the docs first:

https://www.concrete5.org/documentation/developers/5.7/designing-for...

That will get rid of these initial problems - then if there are other issues they'll be easier to track down.
WebcentricLtd replied on at Permalink Reply
hello,
the header_required shouldn't be inside the html body.

It looks like you are also missing some fundamentals on theme-building for 5.7 as you are missing the call for the page wrapper.

Best thing to do is likely look at the docs first:

https://www.concrete5.org/documentation/developers/5.7/designing-for...

That will get rid of these initial problems - then if there are other issues they'll be easier to track down.
zanedev replied on at Permalink Reply
zanedev
You need to check when the site is in logged-in/edit mode then apply a different css class to body element to push down the header navigation under the c5 toolbar using padding.

Not sure what version of C5 you are running... Here is some example code to get you going you need to check if the user is logged in and in edit mode for version 5.7 search for the forums for checking edit mode, logged in etc for more info.

<?
global $c;
$cp = new Permissions($c);
if($cp->canWrite() && $cp->canAddSubContent()){
    $canEditContent = true; //means user is logged in and top bar is showing
}
if($c->isEditMode()) {
    $isEditMode = true; //user is logged in and actually in edit mode
}
$stickyHeaderEnabled = !($canEditContent || $isEditMode);
?>
<body class="<?if($stickyHeaderEnabled):?> sticky-header <?endif;?>   <? if ($isEditMode): ?>  c5-edit-mode <? endif; ?> <? if ($canEditContent): ?>  c5-can-edit <? endif; ?>">
APrather replied on at Permalink Reply 1 Attachment
AndyJ... it was my code error on my first part. The " header Loader", <?=Loader::element('header_required'); ?> is actually placed after <head>. The code
<div class="<?php echo $c->getPageWrapperClass()?>"> is placed after <body> and the
<?=Loader::element('footerer_required'); ?> is placed before </body>.
Although I didn't go further with this code
<?
$a=new Area ('Area Name')
$a->display($c) ;
?>
because I was having trouble with header.

Zanedev... Yes, I was sure that it was logged in... And I m not sure I get this code you have implemented care to elaborate? BTW i mentioned earlier. This is the latest version of concrete (5.7) I installed it yesterday.

Guys I found the problem, it seem like this code... <div class="<?php echo $c->getPageWrapperClass()?>"> is having conflict with this bootstrap's navbar-fixed-top
<nav class="navbar navbar-inverse navbar-fixed-top">

Now If i remove "navbar-fixed-top" it will solve the problem... But not an solution for me because I wanted to keep navbar fixed at the top. Are there any other solutions? There are theme in attached file. If you are interested... try to do experiment by removing only navbar-fixed-top part and see what happen when you refresh your browser. Please do let me know if you find any solution.
blinkdesign replied on at Permalink Reply
blinkdesign
this work quite fine. a clean boostrap 3.4 theme to build upon.
https://github.com/dsgraham/theme_c57_bootstrap...
APrather replied on at Permalink Reply
Blink, I believe I already have tried this theme before. But the whole point of this discussion was about overlaying issues between c5 header and navbar with this code "navbar-fixed-top". I can assure you the bootstrap 3.4 theme from github will face same issues with "nav-fixed-top". But thanks anyway.
sambol replied on at Permalink Best Answer Reply
From what I get when reading your message, you want to push the nav bar down when the concrete tool bar shows.

Concrete (5.7 at least) adds the class "ccm-toolbar-visible" to the HTML tag when you're logged in and you can catch this in CSS, as such:
html.ccm-toolbar-visible nav{
    margin-top:50px;
}
html.ccm-toolbar-visible body{
    padding-top: 50px;
}
APrather replied on at Permalink Reply
Wow, it worked! Thank you sambol and rest of you that replies and try to help.
kevin001 replied on at Permalink Reply
kevin001
I had the same issue. I added this code to my CSS and fixed it, thanks.