Header above nav bar

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
User avatar
shasta59
AppGini Super Hero
AppGini Super Hero
Posts: 231
Joined: 2013-01-08 19:40
Location: Calgary, Alberta, Canada

Header above nav bar

Post by shasta59 » 2014-10-19 14:36

I am back again after being off this forum for quite a while. This has been a very very challenging year for me with many personal situations that needed addressing first.

Here is how I solved the need for a header picture above the navbar in bootstrap

First step was to change the header.php file with a minor addition. (There is more than one way to do this but I like to keep css code with css etc). This is a cheap and dirty method but works for me on all test sites I have tried. I am refining it but needed a solution that was quick and easy.

1. In header.php add the following below the <body> tag and above the <div class="container"> tag. Comments are there only for my reference - you do not need them.

Code: Select all

    <!-- header picture area -->
    <div class="masthead">
    </div>
<!-- end header picture area -->
    
        
2. In the css file you are using (I am using readable.css) add the following - does not matter where but I put it around line 150 or so

Code: Select all

/* header css area */
.masthead{
	height: 108px; /*adjust for your image size */
	background-image: url(link to image location);
	background-repeat: no-repeat;
	background-color: #FCCC13; /* optional */
	background-position: center; /* optional */
}
3. Then look for .navbar-fixed-top and make it look like this: (commented out the top: 0)

Code: Select all

.navbar-fixed-top {
  /*top: 0;*/
  z-index: 1030;
}
Remember this is a cheap and dirty solution and depending upon other changes may not work for you

I am working on making it better and more responsive including adding code to allow the end user to change the logo from within the admin section by just selecting a new image and sizing. But that is future work and this works for now.

Any questions ask away. Any problems with this method ask away.

Alan
Calgary, Alberta, Canada - Using Appgini 5.50 -

clar1970
Posts: 7
Joined: 2015-02-15 03:24

Re: Header above nav bar

Post by clar1970 » 2015-02-15 03:40

Hi, alan y follow your intersting comments u are a master in this, I want to know in point /2 In the css file you are using (I am using readable.css) /wich file I have to modify, I´m a dummy but I appply several of your code of other posts. I do the point 1 but in point 2 I don´t understand wich file css i have to use.

Regards

User avatar
shasta59
AppGini Super Hero
AppGini Super Hero
Posts: 231
Joined: 2013-01-08 19:40
Location: Calgary, Alberta, Canada

Re: Header above nav bar

Post by shasta59 » 2015-02-15 13:15

Just modify the readable css file.

Alan
Calgary, Alberta, Canada - Using Appgini 5.50 -

clar1970
Posts: 7
Joined: 2015-02-15 03:24

Re: Header above nav bar

Post by clar1970 » 2015-02-17 18:39

what's the name of css file???

Post Reply