WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Trouble with .page-title and menu (21 posts)

  1. Paraic
    Member
    Posted 2 years ago #

    I've created a site for learning wordpress. Found answers to almost all of my problems in these forums so far but I am having trouble with a few things which I hope someone would be able to clear up for me.

    1) I would like to hide the page title's, not delete them, or at the very least make them smaller. This is my current style.css for it:

    [ Code moderated. For more than 10 lines of code please pastebin.com instead. ]

    Even though I have set .page-title to display: none; all pages still have huge title's, any ideas?

    2) I would like to move the menu to the top of the page. There is 4 parent buttons in total. I have inserted the following:

    [ Code moderated. For more than 10 lines of code please pastebin.com instead. ]

    This does exactly what I want in terms of positioning, but puts the contact button down under the header image. If I do no more than remove those 2 lines of code it appears perfectly under the header image, with all 4 appearing next to eachother.

    I have tried pretty much every combination of padding and margins to get it to come back up but nothing works

  2. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    Someone really has to be able to look at your site to answer questions like this -- so can you post a link to it?

    In general, use Firebug to see what CSS code is actually affecting the html code.

  3. Paraic
    Member
    Posted 2 years ago #

    oh god sorry, its at iamparaic.com

  4. Paraic
    Member
    Posted 2 years ago #

    Just noticed it looks perfect in firefox (latest version), which is the only browser it works in

  5. fwoan
    Member
    Posted 2 years ago #

    1) If you're talking about the big "Home", "About" and "Contact" text, they are showing because they are within the element "entry-title", not "page-title". In fact, I can't find a "page-title" element in your site.

  6. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    First off, you really should use a child theme if you want to modify the default theme -- otherwise you will lose all your changes when you update WP and you also need a clean copy of the default theme for trouble-shooting purposes.

    There is no class of .page-title so that's why that does not work. I'm assuming you mean the large Home (vs. the site name and tagline in the header section)? If so, it's .entry-title that you need to add display: none; to -- line 700 -- but you will just need to put this in your new child theme:

    .entry-title {
    display: none;
    }

    So far as the menu, if you use -30px for the top, it does move it above the header -- but then you might also want to increase the margin-top in the #page CSS (right now it's set to 1em on line 74) But I'm not sure using CSS to move the menu is the best way to go.

    You might want to look for a theme that already has the menu at the top of the page -- less likely to have problems with it; or modify the layout in the header.php file.

  7. fwoan
    Member
    Posted 2 years ago #

    2) Give nav#access a width, like 100%

  8. Paraic
    Member
    Posted 2 years ago #

    but I have entry-title set to:

    .entry-title {
    	clear: both;
    	color: #484848;
    	font-size: 20px;
    	font-weight: bold;
    	line-height: 1.5em;
    	padding-bottom: .6em;
    	padding-top: 10px;
    }

    so why doesn't this apply to the page title's as well? That formating is only on the blog title's...

    Thanks for the tips on the menu positioning, I'll just have to keep toying around with it and see. Whats REALLY annoying me is that it's find in Firefox...

  9. fwoan
    Member
    Posted 2 years ago #

    You are defining those rules to anything with the class entry-title. The display: none; you are writing is assigned to an element with the class page-title. Curiously, there are no elements with that class on your page. You can add that class by editing your theme's relevant template file and then you will see (or, rather, not see) them styled as you need.

    Does this make sense?

  10. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    There is no such class as .page-title. If you want to change the titles in the header, look for:

    #site-title and #site-description

    Those are the IDs that correspond to that content.

    This is a good CSS resource: http://www.w3schools.com/css/default.asp.

  11. Paraic
    Member
    Posted 2 years ago #

    @fwoan: Yeah I understand what your saying about there being no class called page-title. And I can see that the title's "Home" "About" etc are classed as entry-title, I just don't understand why it's not taking the entry-title formatting which the blog post titles are taking... I hope im explaining that right?

    @wpyogi: I've had no problems editing the site-title or description, thanks to a little helping hand from here :). It's the large "home" and "about" etc etc on each page that I need to edit but they don't seem to respond to anything I change

  12. fwoan
    Member
    Posted 2 years ago #

    Paraic,
    This is because you have a more specific rule that is overwriting the rules you showed above.

    .singular .entry-title { is overwriting it in your style.css on line 1061.

  13. fwoan
    Member
    Posted 2 years ago #

    As a Web Developer, I try to keep all styles group by what they are affecting. That way rules aren't scattered all over. Also as WPyogi pointed out, Firebug will make this a 10 second problem to diagnose.

  14. Paraic
    Member
    Posted 2 years ago #

    You absolute legend, thank you so much for your time!

    .singular .entry-title controls the titles of the pages then,

    title issue solved!!!

  15. fwoan
    Member
    Posted 2 years ago #

    Glad to help.

  16. Paraic
    Member
    Posted 2 years ago #

    I almost feel bad asking but would you know which lines control the "Category Archives: Blog" at the top of the blog page and the reviews page?

    I'd like to hide them aswell. Only just noticed it

  17. fwoan
    Member
    Posted 2 years ago #

    You are going to run into these kinds of issues a lot when developing. You need to use a developer tool so that you no longer need to wait on someone to reply. Chrome has on baked-in. You can see what styles are applied to an element by right-clicking it and selecting 'Inspect Element' and you will be able to see everything that is happening on your site.

  18. Paraic
    Member
    Posted 2 years ago #

    Thanks, I've used inspect element accidentally before but I've only now realised how to ACTUALLY use it.

    You know what ironic, its those little title's that were .page-title lol

    So I ended up having to re-insert

    .page-title {
    	display: none;
    }

    Which also explains why they weren't showing up before... thanks for all the help guys I really appreciate it. Hope this thread passes on the favour to anyone else struggling

  19. fwoan
    Member
    Posted 2 years ago #

    Great!

  20. Paraic
    Member
    Posted 2 years ago #

    AND to complete the success of this thread I have successfully relocated the menu to just above the header image using the following:

    #access {
    	position: absolute;
    	top: 90px;
    	clear: both;
    	display: block;
    	float: left;
    	margin: 0 auto 6px;
    	width: 100%;
    }
  21. Dj Suyog
    Member
    Posted 2 years ago #

    Hello There,
    I m a new wordpress user and i currently made a website using wordpress.
    I have a problem with the navigation. i dont know why all pages are displaying even though there is no menu created in the Menu option !!...
    i tried to solve it out by trying everything i can do but no solution.
    i have created menu to check whether it'll only display the menu created in the menu option. I m using free theme called AllTuts from site5.com

    Can you pls tell me how can i solve the probz...
    You can visit my site and take a look at the navigation bar.
    This is my website link
    http://www.beatzcreator.com

    hope you'll solve the probz

Topic Closed

This topic has been closed to new replies.

About this Topic