Moving tabs from top to bottom of Banner
-
How can I move the tabs I have created from the top of my banner to the bottom of banner to create more space at the top, using academica theme”
The blog I need help with is: (visible only to logged in users)
-
Are you talking about the “Home, Mission, Am I an…” links at the very top of the page? It’s not really possible to move them below the banner with this particular theme.
If you do not like their location in this theme, you could try finding a theme that has them below the banner already, then adding Custom styles to that theme.
-
You can use absolute positioning to make a change like this. Note that it will depend on the height of your header always being the same (which it should). Here is an example you can start with, try adding this to your Appearance → Themes → Customize → CSS panel and adjust the values to move the menu around on the page:
#header { position: relative; } #main-nav { position: absolute; bottom: -480px; } -
Thank you designsimply.
Angrewxcpht responded with this: “It’s not really possible to move them below the banner with this particular theme. If you do not like their location in this theme, you could try finding a theme that has them below the banner already, then adding Custom styles to that theme.”
I tried doing this “Appearance → Themes → Customize → CSS panel” but I can not find the CSS panel. So perhaps the them I have “Academica” does not support this?
-
My apologies! If you haven’t purchased the custom design upgrade yet, then you need to go to Appearance → Themes → Customize → Custom Design first and click the “Try Now” button. Can you try that and then click on CSS?
-
hi designsimply and I am sorry for such a late response. I tried your recommendation to “try now” through the custom design and clicked on CSS, it would not allow me to do anything different than what I can already do. the tabs are ok where they are I just thought the “static page” aka my home page would look better with them under the banner, if you have any more recommendations please let me know.
Speaking of the banner, if you don’t mind giving some advice, how can I keep the banner on the “static page” aka my home page and eliminate it from all the rest of my pages which I am using as tabs. for example if you hit the “Am I an Addict” tab the screen slightly moves bc it is going to a different location but it doesn’t look like it actually moved bc the banner is on all the pages, you would have to scroll down the page to see if you have actually navigated away to a different page. how can I eliminate the banner on all pages except my static page/home page?
George
-
If you don’t have the Custom Design upgrade you cannot make the header image display on one page only. What you can do is remove the header image (in Appearance > Header) and insert it in the content of the page you’ve set as your front.
-
I tried your recommendation to “try now” through the custom design and clicked on CSS, it would not allow me to do anything different than what I can already do.
You also need to enter the CSS example from above into the editor in the Appearance → Themes → Customize → CSS panel and it would let you preview any CSS changes. Did you do that?
-
thanks designsimply! and again sorry for such a late response. I copied the CSS example you gave me from above but I do not know what you mean by entering it into the editor. I click on CSS and a small screen pops out that reads, “This feature is a part of Custom Design. Purchase to make it live or exit the preview.” Is underneath that were I am supposed to enter the CSS example? very sorry I am not so savvy with this, I do really appreciate your guidance though.
Justpi, So if I have the Custom Design upgrade I can then have my header image appear on only the static page (my home page) and not the rest? how? can you guide me through that? or can you guide me simplydesign?
-
designsimply! I upgraded and it worked!!! awesome ok now I want to make the header image ONLY appear on my static page, please help me?
-
ok now I want to make the header image ONLY appear on my static page
I just checked http://lifeilead.com/ and I see you got this figured out using the following CSS:
#slider-wrap { display: none } .home #slider-wrap { display: block }Nice work!
-
-
- The topic ‘Moving tabs from top to bottom of Banner’ is closed to new replies.