CSS Navigation Bar
-
Hello. I am using the Intergalactic 2 theme and I would like to know if there’s a snippet for the following.
Would it be possible for my menu bar/navigation be across the whole page just on top of the first post instead of just having that Menu square?
The blog I need help with is: (visible only to logged in users)
-
Hi @elcapicap, the Intergalactic menu is controlled by Javascript and it isn’t something we can change with CSS.
-
I see. I would like if few snippets of you can help me out.
1. If you look at my most recent image upload in my media, you will see a screenshot of how the text of a post looks like on a mobile device, you will see that some words end with a – and separates it. Is there a snippet to get rid of that – so the words look complete once it ends on the line?
2. Is there a snippet to get rid of the site tittle and the menu bar and also to get rid of the white background and put the first post all the way to the top but just on the mobile device version?
-
@elcapicap, I’m not seeing a screenshot of a post in your media library right now, did you delete it, but I was able to see the hyphenation by adjusting my browser window width. Add the following to your custom CSS to set hyphenation to none and keep the words from breaking.
.entry-content, .entry-summary, .page-content, .comment-content { hyphens: none; -moz-hyphens: none; word-wrap: normal; } -
Thanks. Would there be a snippet for the following. Can you set the menu bar to be white? And also on the mobile version is there any way to make the site title be on the same line as the menu bar? My most recent image in my media is a screen shot of how the site tittle and menu bar looks like right now.
-
For the menu label and lines, add the following to change them to white.
.lines::before, .lines::after, .lines, .menu-toggle.x.toggle-on .lines::before, .menu-toggle.x.toggle-on .lines::after { background: #fff; } #masthead .menu-toggle, #masthead .menu-toggle.toggle-on { color: #fff; }The site title moves down a line on screens 1059px and narrower. We can use this Media Query to get it to stay aligned with the menu horizontally.
@media screen and (max-width: 1059px) { .site-branding { width: 50%; } .site-title { margin-top: 12px; margin-left: 30px; } } -
Both of them worked perfectly. Thanks
Would there be a snippet to erase the Menu text in that menu bar and just leave the 3 lines?
-
Also, it seems that the snippet you provided me with to get rid of the hyphens in the words in the entry-content is not working. Is there a way to make it work?
.entry-content, .entry-summary, .page-content, .comment-content {
hyphens: none;
-moz-hyphens: none;
word-wrap: normal;
} -
Hi @elcapicap, I’m seeing only the one page on your site right now, as near as I can tell and I’m not seeing any hyphenation on it. Can you give me the link to a page or post where it is hyphenating?
We can hide the word Menu and move the 3-line icon over to the right with the following.
#masthead .menu-toggle { color: transparent; } .lines { margin-right: -40px } -
The menu text was able to disappeared on the mast head but once you click on the 3 lines, it opens up the menu bar and you can see the menu text behind an X. Is there a way to also erase the menu text from there as well?
And the hyphenating only happens in the mobile version. I was checking my latest post in an iphone and you can see hyphens breaking words at the end of the line.
-
It worked perfectly.
Would there be a snippet to add a copyright text before and after the wordpress logo at the bottom of the site?
Would there be a snippet to make the width of the entry content in the blog posts to be 800px? If am not mistaken is currently at 660px.
-
For the copyright, the following two rules would allow you to add text to the left and/or right of the WordPress logo.
.site-info:before { content: "Text Left"; padding-right: 5px; } .site-info:after { content: "Text Right"; padding-left: 5px; }If you wanted the copyright to be above the WordPress logo, then you could use this.
.site-info:before { content: "Text center top"; padding-bottom: 5px; display: block; }For the width on the blog this would increase the width to 800px.
@media screen and (min-width: 784px) { .blog .entry-summary { max-width: 800px; width: 100%; } } -
Those codes worked perfectly. Thanks! You are a CSS genius.
Days ago you had given me this snippet to get rid of the hyphens in the mobile version of the entry content but it seems that is not working.
.entry-content, .entry-summary, .page-content, .comment-content {
hyphens: none;
-moz-hyphens: none;
word-wrap: normal;
}Is there another snippet or some type of way to fix that? If you take a look at my most recent upload in my media, you will see an image of how my latest post looks like in an IPhone plus. You will see the hyphens breaking out the words at the end of the the last 3 lines. I only want to get rid of those hyphens in the mobile version cause for a computer view I can see the complete text with no hyphens.
-
Hooray on that working, and boo on the hyphens. Seems I forgot to include the webkit declaration for Chrome and Safari. Replace with this.
.entry-content, .entry-summary, .page-content, .comment-content { hyphens: none; -moz-hyphens: none; -webkit-hyphens: none; word-wrap: normal; } -
Hooray, It worked. You are a genius.
Would there be a snippet to make the site tittle be more to the left? So that it can be almost identical as the 3 lines menu bar distance from the start of the page.
-
In your custom CSS, find the max-width 1059px media query and adjust the left margin and see if that does what you are wanting.
-
-
Can you explain again what it is you are wanting to do with the site title, and on what size screen? Perhaps I misunderstood.
-
I would like for the site title to be or to start more to the left of the screen as it is currently right now. Just on the computer version.
- The topic ‘CSS Navigation Bar’ is closed to new replies.
WordPress.com Forums 