Messed up the header in triton

  • irfarious · Member ·

    The main menu on top of the page is not displaying the sub menus. For example if you hover the mouse over “tutorials” and then move it a little bit down, you will be able to see a white sub menu which is getting cut off where the header image starts. I’m not able to pin point the exact mistake or the piece of code that I need to edit. Can you please help?

    The blog I need help with is: (visible only to logged in users)

  • irfarious · Member ·

    Ok, something that I figured out.

    In order to make my site full width I edited this part of the container code. 

    .container {
	display: block;
	margin: 0 auto;
	width: 100%;
	overflow: hidden;
}

    If I keep overflow: hidden;then I loose the submenu but get a clean full width. But If I remove overflow: hidden; then I get the submenu but I end up having some extra space on the right had side which also brings up a horizontal scroll bar in the browser window.

    How do I tackle this? Is it too much to ask for both?

  • thesacredpath · Member ·

    Hi there, I see you have changed to the Cubic theme. Are you just trying it out, or are you going to stick with this theme?

  • irfarious · Member ·

    Well, I was about time. It’s been ages since u got any response. So I started exploring out options and for the moment, I feel cubic is nice. I have a question though. I had actually posted it as a separate thread but I did not g3t any response yet.

    I am trying to make the posts in cubic theme expand to 100 percent width. Can you please help me with that?

  • irfarious · Member ·

    Please excuse the brevity of my message. I typed it from my mobile.

  • thesacredpath · Member ·

    You can use the following to widen the content on single post pages. This should allow you to widen single posts and also static pages such as your about page. The width was 768px, but to maintain the responsive nature of your site, I moved that to max-width and then set a 100% width. 

    .entry-author, .entry-content, .entry-footer {
    max-width: 900px;
    width: 100%;
}

    For readability reasons, I normally recommend you do not go over about 800px in width for textual content, but you can set it as you desire.

  • irfarious · Member ·

    Thanks so much. It’s exactly what I was looking for. I agree with you on the recommended width for responsiveness. However, you must have realized that mine’s a photography blog. And I want to show the focus on my images rather than my text. That’s the reason why I was struggling so much with my previous theme.

    Having said that, I would also not want my site to look out of place when browsing on smaller screen. So my next question is there a way to set a margin on the left and right of the post page, so that the post does not stick to the edges when viewing on smaller screens?

    Thanks to my noobness with CSS, I treid 

    .entry-author, .entry-content, .entry-footer {
	max-width: 1500px;
	width: 100%;
	margin-left:20px;
	margin-right:20px;
	position: center;
}

    but that made the page move to the left side of my screen.

    And on a completely unrelated note, can I bring a side bar into the post page?

  • irfarious · Member ·

    I have a few more questions

    1) Even if I upload large resolution images to a post, they are not expanding to the full width. I ensure that the image size is set to full size and even in css I have set the media width to 1920px, but still they do not increase in size. I thought may be the browser cache is responsible for this. Even after clearing everything, it’s still not expanding my images to full width. How do I rectify this?

    2) How do I get the post comments as well to same width as my post page

    Sorry to be bombarding you with questions like this.

  • designsimply · Member ·

    I researched this and found that the Cubic theme has a funny way of resizing images with captions.

    When I look at the page source for one of the posts on your site such as http://thereddotman.com/2015/01/18/chilli-bajji-besant-nagar-beach/ I can see the following CSS rule:

    @media screen and (min-width: 768px) {
	.wp-caption.caption-big, .image-big {
		display: block;
		margin-bottom: 24px;
		margin-left: -72px;
		width: 768px;
		max-width: 768px;
	}
}

    It always helps to look at a specific example! See how the width and max-width are set to 768? You can override that by adding the following custom CSS example to your Appearance > Customize > CSS editor:

    @media screen and (min-width: 768px) {
	.wp-caption.caption-big, .image-big {
		width: auto;
		max-width: none;
	}
}
  • irfarious · Member ·

    Thank you so much for that piece of code. It worked, although it was keeping the images about 30px more to the left than the text left margin. (Hope I’m making sense). So I had to add one extra line

    margin-left: 0px;
    and it all fell in their right places. Than you once again.

    Also, can you please help me with the other request about the post comments. I want them to occupy the same space as the post.

  • designsimply · Member ·

    it was keeping the images about 30px more to the left than the text left margin. (Hope I’m making sense). So I had to add one extra line

    Good catch. Looks good to me.

    I want the comments also to have the same width as the post.

    Give this a try:

    @media screen and (min-width: 768px) {
	.comments-title,
	.comment-list,
	.comment-reply-title,
	#respond .comment-form {
		max-width: 1300px;
		width: 100% !important;
	}
}
  • irfarious · Member ·

    Fabulous!!! That one worked like a charm. Thanks so much. Would’ve given you a hug if you were here.

    Just one last this. This was actually the first thing on my mind but then again, looking at the theme and the amount of modification it needed I thought I will save it for the last.’

    Right now the side bar menu is appearing as a part of the primary menu. Is there any way I can make the side bar appear on the right hand side of post pages?

  • designsimply · Member ·

    Right now the side bar menu is appearing as a part of the primary menu. Is there any way I can make the side bar appear on the right hand side of post pages?

    The sidebar in the Cubic theme is behind a click. Because of how it is setup, it’s not easy to show or hide just parts of it with CSS. I think you can make the whole sidebar visible or not pretty easily, but re-positioning it is another story.

    Moving the sidebar in the Cubic theme into a post area is outside the scope of CSS support here (it looks pretty complex to me!).

    But I tried to work on it for a little while and I can give you what I came up with to help you get started if you want to try to take it further on your own:

    @media (min-width: 1024px) {
	.single .sidebar-toggle {
		display: none;
	}

	.single .sidebar {
		display: block;
		position: absolute;
		left: auto;
		right: 0;
		max-width: 444px;
	}

	.single .sidebar-content {
		width: auto;
	}
}

    The @media line limits the change to screen sizes 1024px and larger.
    http://en.support.wordpress.com/custom-design/custom-css-media-queries/

    The “.single” at the front of the selectors limits the change to single posts because “single” is one of the body classes on posts like that. To see what other body classes are available to use for selectors, look at the body tag in the page source.
    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    We provide support for the Appearance > Customize tools here and we also give guidance on CSS to help people get started learning so they can make changes on their own in the future. I think it might be possible to make the change you’re thinking of, but it’s pretty advanced and would take some time and testing to work it out if you want to keep at it.

  • irfarious · Member ·

    Wow!! I love way how little pieces of code can make such a big impact on anything. Thanks once again.

    This is how it’s affecting my site now

    1) It’s over lapping on the post page
    2) It’s also showing the primary menu
    3) It’s shrinking the images that I used in my side bar.

    I tried fixing it but I miserably failed at every attempt.

    After seeing the way the primary menu appeared on the side bar, it got me thinking. When calling the primary menu from the top right button, I see that it expands to the full page. I was thinking of shrinking it to, say 400px. But then I wonder how will it impact on smaller screens.

    So, how do I shrink the size of the primary menu which appears after clicking on that top right button, yet keep the size responsive enough on smaller screens?

  • irfarious · Member ·

    And thanks for the tip. At the moment, I am using firefox with firebug add on to inspect the elements and edit their code. The problem is I find the code which it is showing for cubic theme to be way more different than what I used to see and comprehend on my previous theme, triton.

    For example, I’m trying to figure out how to bring the post title which is currently appearing on the top of the post page featured image to appear at the bottom. So, I found this code

    body.single:not(.title-with-content) .hentry.has-post-thumbnail:not(.format-video) .entry-header {
    left: 50%;
    margin-left: -312px;
 }

    And modified it to

    body.single:not(.title-with-content) .hentry.has-post-thumbnail:not(.format-video) .entry-header {
    left: 50%;
    margin-left: -312px;
    top: 8.5%;
}

    In fire fox, while eiditing on firebug, it looks perfect. But when I copy it on to the css editor and save, it’s repositioning the title to appear in the center of the featured image of the post page.

    I will get the hang of it if I keep at, but just that I will need help from others who are well versed with it along the way.

  • irfarious · Member ·

    Hello?

  • designsimply · Member ·

    I tried as well and didn’t get a complete solution going. That’s why I mentioned that it may take a lot of time and testing for you to work out.

    This is how it’s affecting my site now

    1) It’s over lapping on the post page
    2) It’s also showing the primary menu
    3) It’s shrinking the images that I used in my side bar

    Correct. As I mentioned, it’s not a complete solution and your request is not a simple request at all. The example I gave was just a starting point.

    So, how do I shrink the size of the primary menu which appears after clicking on that top right button, yet keep the size responsive enough on smaller screens?

    This is quite an advanced request. I’m sorry but it is outside the scope of this support forum. I have made some suggestions to help you get started, but you will need to take it from there on your own or possible hire help if you want someone to spend a lot of time working this out.

    What you are trying to do is a very advanced update. It’s not something I know the answer to, I’m afraid. I’m sorry I couldn’t be of more help, but we can only go so far in making adjustments and we are here to help you get started and not make major design updates to your site for you. Even if you get the Firefox issue worked out, the changes you want to make are a major structural change for this theme and will take a lot of work and testing to get right. It’s up to you whether to take it on.

    I did try taking a look at your specific example in Firefox to see if I could figure out what’s going on with that part, but applying the CSS example you gave simply moves the post date and post title down further on the page and doesn’t affect anything else on the page in my testing.

  • irfarious · Member ·

    I understand. And really appreciate the help you have done so far. If what I have asked is not really possible, is there a way to place a text in the header next to that menu button and link it to a page?

    What I’m trying to do is put test that reads portfolio and upon clicking it, it should open up a page with the portfolio page. Is this possible?

  • designsimply · Member ·

    is there a way to place a text in the header next to that menu button and link it to a page?

    Not with CSS, I’m afraid. CSS can change the appearance of things and can be used to add plain text, but it cannot be used to add a link. To do a customization like that, you would need to edit the theme code (not allowed at WordPress.com) and you would need a WordPress.org setup for something like that.

    WordPress.com vs. WordPress.org

  • The topic ‘Messed up the header in triton’ is closed to new replies.