separate background color for menu bar; menu bar search widget; related features

  • Unknown's avatar
    johnbrookswriting · Member ·

    (1)
    Hoping someone can provide CSS for implementing the following functionality and design features for my site – johnbrookswriting.com – which features can be seen in the functionality and design of the site johnlheureux.com :

    (a)
    a separate background color—different from the site’s general background color—to serve as the background color for the horizontal menu bar (large and small screens) and for the dropdown menu items (on smaller screens)

    (Note:
    Three forward slash marks—“///”—currently represent the menu icon for my sight on smaller screens. I may keep these or may replace these with the word “Menu”);

    (b)
    a search widget in the menu bar (large and small screens), placing this widget at the right end of the menu bar;

    (c)
    a magnifying glass icon to represent the search widget, which icon, when tapped/clicked, opens a search box with, inside the search box, the same icon on the left inside of the box and “Search …” to the right of this icon;

    (d)
    for smaller screens, a triangle to the right of the menu bar icon (or “Menu”), which triangle points downward when the menu items are not displayed in dropdown and points upward when these items are displayed in dropdown;

    (e)
    for smaller screens, highlighting the dropdown menu item of the currently displayed page with a different color from the color of the other menu items;

    (f)
    for smaller screens, left-margin aligning the dropdown menu items so they have the same left margin as the menu icon (or as “Menu” if I change the menu icon—the 3 slash marks—to “Menu”) (instead of the left margin of these items being indented as it is currently).

    Please see the site johnlheureux.com to get a clear idea of what I hope to achieve as the johnlheureux.com site currently has all of these features.

    (2)
    I would like to know if any of my current CSS segments, menu-related or otherwise, would prevent implementation of the above-noted features or become unnecessary as a result of their implementation as I would like to delete any such segments.

    I can post my current CSS if it is not otherwise viewable.

    Very grateful for any help.
    Site/Blog: johnbrookswriting.com

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there,
    1a) This will allow you to change the color of the main navigation, submenus and the touch device menu for smaller screens. 

    .navigation-main, .navigation-main ul ul, .main-small-navigation {
    background-color: #33ff66;
}

    1b/c) With responsive themes such as Truly Minimal, this isn’t something that is doable. If you narrow and widen your browser window you will see that the header image shrinks in size on smaller screens and the menu follows it up. The only way we could do a search would be to move a widget up into the menu area, and when we do that it loses all relationship to the other elements in the web page so it doesn’t flow and more with them, so there really isn’t a way to add a search to the menu, and especially not to the touch device menu for smaller screens. To do this successfully would require editing the php script theme files and we cannot do that here at WordPress.com.

    1d) With the word “Menu” there, you can replace the .menu-toggle:before rule with the following, which puts a Genericons font icon of a down arrow to the right of the word Menu. If you use /// then we cannot add the down arrow. 

    .menu-toggle::after {
    content: 'f502';
    font-family: genericons;
    position: relative;
    top: 5px;
    font-size: 60%;
    right: -5px;
}

    1e) This will allow you to set the current menu item color on the touch navigation. 

    .main-small-navigation .current-menu-item > a, .main-small-navigation .current_page_item a {
    color: #ffcc33;
}

    1f) This will left-align the menu toggle text on smaller screens. The Menu items on the small screen dropdown are already left aligned by default. 

    .menu-toggle {
    text-align: left;
}

    With the exception of what I noted above on the Menu vs. /// , I don’t see anything that would cause any issues.

    Let me know if I have misunderstood anything or perhaps not caught everything.

  • Unknown's avatar
    johnbrookswriting · Member ·

    Thanks so much for your reply and specific CSS suggestions—very helpful!

    These lead me to some further questions:

    (1)
    Is there any CSS and/or other means to extending my custom header as well as the menu bar (and menu toggle and dropdown) background color all the way to both sides of the screen?

    (If you look at the johnlheureux.com site, which is a model for the look I would ideally like to achieve, you can see the header and menu bar background color extending all the way to both sides of the screen.)

    (2)
    Is there any CSS and/or other means for reducing / controlling the height of the menu bar background color?

    As the background color looks now—using the CSS you provided—on a small screen/window size, the background color extends, in terms of the look I’d like, too far below the three forward slash marks (which I’m keeping for now as the dropdown menu toggle icon).

    (3)
    As for your feedback on (1)(b) and (c) of my initial post (placing a search widget, represented by a magnifying glass icon, at the right end of the menu bar . . . ):

    (a)
    Would this be doable with a non-responsive theme?

    Put another way: Is it possible there could be a wordpress.com theme that would / could have a search widget in the menu bar, provided the theme’s default coding / structure allows this? Or is having a search widget in the top horizontal menu bar inherently impossible within the general framework of wordpress.com themes, even non-responsive?

    (I’ve read that there are some wordpress.com themes which have a search widget in the header area, but haven’t read anything similar for the menu bar area.)

    And, if it would be doable:
    (b)
    Would all of the CSS I’m already using for other purposes continue to work if used as custom CSS for the non-responsive theme? Or might some of it no longer work?

    (c)
    Would there be any unavoidable major drawback to using a non-responsive theme which might outweigh the advantage of being able to achieve the look and functionality of (1)(b) and (c) of my initial post?
    (For example, would making a non-responsive theme look good for all screen sizes require CSS and/or other mark-up and/or coding not available for a wordpress.com site?)

    (4)
    Looking at the johnlheureux.com site, which, as I say, is a model of the look and functionality I hope I could at least in part achieve, do you think that site is (probably) using a responsive theme but one for which the site creator has (probably) edited the php script theme files to enable placement of the search widget, using the magnifying glass icon, near the right end of the menu bar?
    (I realize this is something one can’t do with a wordpress.com site.)
    (I’m assuming here that the johnlheureux.com site was created using wordpress.org, not wordpress.com.)

    (5)
    Regarding (1)(f) of my initial post, what I would like to achieve is to have the dropdown menu items on the small screen left-margin-aligned precisely under the left margin of the menu toggle—i.e., having the same left margin as the menu toggle—instead of being indented somewhat to the right, as they are now.
    And, also, without the black dots/circles which currently display as bullet point indicators to the left of each menu item.

    I.e., just as, for the johnlheureux.com site, the dropdown menu items are all left-margin-aligned under the “M” of “Menu,” I would like all of the dropdown menu items left-margin-aligned under the first (left-most) of the three forward slash marks currently serving as the menu toggle for my site.

    Grateful for any (additional) CSS and/or other means you could suggest for the above.

    Site/Blog: johnbrookswriting.com

  • Unknown's avatar
    thesacredpath · Member ·

    (1)
    Is there any CSS and/or other means to extending my custom header as well as the menu bar (and menu toggle and dropdown) background color all the way to both sides of the screen?

    Truly Minimal has an overall parent container which means we would have to use position:absolute to get the header/menu to extend to the edges. This makes it difficult to do this cleanly sinc position: absolute means the elements basically float free of all other page elements so they don’t flow and adjust position together. You can add this at the bottom of your custom CSS and then play with it. 

    #main {
    margin-top: 160px;
}
.logged-in .site-header {
    padding-top: 32px;
}
.site-header {
	position: absolute;
	top: 0;
	width: 100%;
	left: 0;
	background-color: #000;
}
.logged-in .site-header {
	margin-top: 0;
}
@media screen and (max-width: 781px) {
	.site-header {
		top: 46px;
	}
}

    (a)
    Would this be doable with a non-responsive theme? (placing a search widget, represented by a magnifying glass icon, at the right end of the menu bar . . . )

    To turn a normal search box into a magnifying glass that expanded when clicked would require editing the theme php script files, which we cannot do. There are a number of themes that have that already, so you may want to explore those. We could, on a fixed width theme, more a search up into the header area relatively easily, but we couldn’t modify the behavior of it.

    With responsive designs, they adjust to the visitor’s device/screen size automatically. With fixed width themes they do not, so everything will look very tiny on a phone. You can activate the Mobile theme at Appearance > Mobile, but it would not look like your main website, and editing the CSS for the Mobile theme is a bit limited.

    (4) Looking at the johnlheureux.com site, which, as I say, is a model of the look and functionality I hope I could at least in part achieve…

    They are using the Twenty Thirteen theme, which is available here at WordPress.com. I would suggest you give that theme a try since it has the things you are looking for.

  • Unknown's avatar
    johnbrookswriting · Member ·

    Thank you very much for this further explanation and feedback—very helpful, and I will, as you sugges give Twenty Thirteen a try, hoping I can implement, where needed the other (unrelated to the above) modifications I’ve made using CSS.

    All I have for additional questions, for now anyway, are some basics:

    (1)
    How, if possible, can I view any wordpress site’s CSS?
    (I’m using Firefox or Safari for a browser, if that makes any difference.)

    (2)
    How can I find out a wordpress site’s Theme when it’s not named on the site’s pages (such as is the case with the johnlheureux.com site, which only says “Proudly powered by WordPress”)?

    Thank you for all your help.

  • Unknown's avatar
    thesacredpath · Member ·

    I used the web inspector built into my browser to find relevant CSS. If you are not familiar with the web inspector in your browser, take a look at our support page on How to Find Your Theme’s CSS where you will find some brief screencasts to get you started with it. I find it an invaluable tool when working with CSS.

    The way that I usually find a WordPress site’s theme is to view the source code (normally from the view menu) for a page on the site (any page) and then search on that page for /themes/ and one of the entries will typically have the name of the theme after it. For example on johnlheureux.com I find this
    http://johnlheureux.com/wp-content/themes/twentythirteen/ ...

  • Unknown's avatar
    johnbrookswriting · Member ·

    Thank you very much for this additional feedback—very helpful!

    OK, I’m about to try the Twenty Thirteen theme but I want to check about the following before I do to be sure of not losing the appearance and functionality that I currently have and want to keep:

    (1)
    Will all of my site’s current functionality and appearance carry over into the new theme?

    For example, I currently have, and want to keep, a static top page using a “Full Width, No Sidebar” template and displaying a gallery and with the gallery itself having certain settings for its appearance (e.g., Medium size, Thumbnail Grid, 3 columns). Would I lose all of this if I switch themes and need, therefore, to manually reset all of these functionality and appearance items?

    I ask this because, if I am going to lose current functionality and appearance such as the above by switching themes, then I’ll want to go through every subpage of my site’s Dashboard and take notes and/or screenshots about/of each subpage to make sure I can refer to them in case I can’t remember how I had everything set up. This would be a tedious and time-consuming process which I hope I could avoid.

    (Note re CSS:
    I will definitely copy my current CSS so I can paste it into the new theme’s CSS box, to preserve what I want of the CSS, but outside of doing that I would hope I could avoid the above tedious, time-consuming process.)

    (2)
    Even if the answer to (1) is that current functionality and appearance won’t carry over into a new theme, if I then return to my current theme, will the current functionality and appearance return as well? I.e., will the wordpress.com software remember my settings for functionality and appearance for my current theme?

    (3)
    Will making a backup of my site—e.g., exporting it to my desktop—back up the current functionality and appearance as well as the content, or only the content?

    Thank you for all your help.

  • Unknown's avatar
    johnbrookswriting · Member ·

    Just to add to the preceding post:
    I’ve read the parts of Support page on Themes relevant to switching themes and understand the following:
    “Custom Menus
    You’ll want to reassign your Custom Menus to the locations you want them in the new theme. Each theme supports different locations, depending on the theme.”

    “Widgets
    You’ll want to place your Widgets in the proper Widget locations. Like Custom Menus, each theme supports different locations, depending on the theme.”

    So what I’m asking about are settings other than for Custom Menus and Widgets, such as the those I’ve described in the preceding post.

  • Unknown's avatar
    thesacredpath · Member ·

    (1)
    Will all of my site’s current functionality and appearance carry over into the new theme?

    CSS is theme specific, so the CSS for Truly Minimal will not work with Twenty Thirteen, so you will have to customize Twenty Thirteen from scratch. Just for added peace of mind, I would definitely suggest copying your current CSS into a plain text file for safe keeping, but we do keep a vast number of your CSS revisions so that you can return to a previous version quickly in the event something goes wrong, or if you change themes and then change back. There is a CSS Revisions link at the top of the CSS section of the Customizer you can click to come up with a list and then choose from that list. If you click on that link, you will also see that it has the name of the theme that the CSS was related to, so it is pretty easy to switch back.

    If you switch themes and then switch back, many of your settings and such will be remembered. I can’t remember what all is retained, but it is a pretty good bit of it. There may be a few things you may have to reset, but header images, widgets and menus should come back as you had them.

    You can actually Preview themes with your content to see how things look, and you can even do the customizations and such and then when you are happy with things, go ahead and activate it.

    Exports do not export any settings. It is only the content and content related data, such as categories, tags, image URLs, etc., so exporting wouldn’t really help in this case.

  • Unknown's avatar
    johnbrookswriting · Member ·

    Thank you very much for this additional information and these suggestions.
    Interesting about CSS—some CSS that I’m using currently I got, as I recall, from posts about themes other than Truly Minimal (my current theme), but your confirmation that CSS is theme specific means there’s no guarantee.
    Now I feel ready to give Twenty Thirteen a try—thank you for all your help!

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

    There is some commonality for certain elements between selectors on our themes here, but because theme designs can vary considerably (one with title to the left, one with title centered, one with title above header, one with it imposed on top of header) even if the selectors are the same, the declarations for one theme may make things on another them go completely awry. It is always best to start from scratch and use what you did on the other theme as a guide.

  • Unknown's avatar
    johnbrookswriting · Member ·

    Thanks for this further explanation.
    I will give Twenty Thirteen a try and post again if I run into any problems—CSS or other—I’m unable to resolve on my own.
    Thank you for all your help.

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • The topic ‘separate background color for menu bar; menu bar search widget; related features’ is closed to new replies.