Stupid Question

Really you should be dealing with the presentation with CSS. Each header should be a different CSS blobk element which you can apply padding or margins to.

I tried that in the style css, but all the tab properties are defined under one element – as ‘menu’. So changing the font-size under menu changes the font for all tabs. Similarly, when i try margins/padding, the entire menu moves as one block.

Thats why i wanted to edit via the header.php where I get to define links/titles for each individual tab within the menu.

For ex. <li class="page_item"><a href="https://telugucinematoday.com" title="About">About</a></li>

I tried adding spaces after ‘About’ (>About</a></li>), but it doesn’t do anything – just like it isn’t doing anything here!

Can I add something after the ‘About’ to get more space between this tab and the next?

If you have a list in this menu div, you can style the list. So if you have something like this in your stylesheet:
#menu { width: 100px; }
you add something like this to style the list items:
#menu ul li { padding 5px; }

Sorry, the css I provided is not 100%. padding: 5px of course. Anyway I hope you know what I mean, if not, provide us with the css code of the menu part, ok?

Thanks falleri! I will try this out right now and if it doesn’t work, I will provide the css code for the menu part

Much appreciated ??

Hey falleri, I tried ur code but all it did was split the nav bar into 2 lines with tabs separated into each.

Here’s the css from my stylesheet for the menu –

/* =Menu
————————————————————– */

#access {
margin-top:-1px;
margin-bottom:20px;
}
.skip-link {
display:none;
}
#menu {
padding:7px 0 8px 0;
overflow:hidden; /* clears the inner float */
}
#menu ul {
margin:0;
list-style:none;
clear:both;
}
#menu ul ul {
display:none;
}
#menu li {
display:inline;
}
#menu a {
display:block;
float:left;
margin:-10px 10px 0 0;
padding:1px 6px;
background:#000;
color:#fff;
text-decoration:none;
}
#menu a:hover {
background:#5C9BD1;
color:#fff;
border-color:#002BFF;
}
#menu .current_page_item a {
background:#5C9BD1;
color:#fff;
border-color:#002BFF;
}
#menu a:focus {
background:#4887BD;
color:#fff;
border-color:#2772B3;
}

Here’s the php from my header.php for the div = menu –

<div id="menu">
<ul>
	<li class="page_item"><a href="https://xyz.com" title="About">About</a></li>
        <li class="page_item"><a href="https://xyz.com" title="Home">Home</a></li>
	<li class="page_item"><a href="https://xyz.com" title="Contact">Contact</a></li>
</ul>
</div>

I’m kind of running out of time, have an appointment later on and still have to cook and all that so have to be really quick about this and that probably won’t do..

Anyway could you show me what happens? Is this the original style sheet code? If so what did you add that caused the problems? Or what did you change exactly in this style sheet?

I see a class added to the list items: page_item, which might have a style applied to it too so you might have to look at that too.

However I am not sure what exactly happens; right now I think the nav bar got split because there wasn’t enough room left because of too many margins and/or paddings but maybe that’s not what happens..?
If you have a div in which this nav bar resides, the div probably has a width specified. If for example this div has a width of 700px and the nav list items all add up to over 700px (including the margins and paddings) this causes a problem, because it won’t fit and therefore split into two rows. But as I said I am not sure if I understand you correctly.. anyway give me an url if you can otherwise a screenshot, ok? I will try to look at it asap and sorry if I’m a bit vague.

I recommend installing Firebug extension for Firefox. With it, you can analyze the html/css directly and know where you have to modify your css.